Changes on sidebar styles, and content of pages

blog/2025-01-14-just-starting.md

@@ -1,14 +0,0 @@
----
-slug: Starting
-title: Starting
-tags: [make, build, sustainable, water]
----
-
-# Toddler Sink
-
-A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
-
-Save water without limiting your child's play with water.
-
-Here's a list of materials needed to construct this sink:
-<!-- truncate -->

blog/2025-01-14-just-starting.mdx

@@ -0,0 +1,26 @@
+---
+slug: Starting
+title: Starting
+tags: [make, build, sustainable, water]
+---
+
+# Toddler Sink
+
+A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
+
+Save water without limiting your child's play with water.
+
+Here's a list of materials needed to construct this sink:
+
+import ImageCarousel from '@site/src/components/ImageCarousel';
+
+<ImageCarousel
+  images={[
+    { src: '/img/sink1.jpg', alt: 'Melt the plastic', caption: 'Step 1: Melt the plastic' },
+    { src: '/img/try.JPG', alt: 'Shape the shell', caption: 'Step 2: Shape the shell' },
+    { src: '/img/step3.png', alt: 'Add electronics', caption: 'Step 3: Add electronics' },
+    { src: '/img/step4.png', alt: 'Finished mouse', caption: 'Step 4: Final product' },
+  ]}
+/>
+<!-- truncate -->
+

docs/Build_Guide/base.md

@@ -0,0 +1,59 @@
+---
+title: Delete later
+description: ...
+sidebar_position: 2
+---
+
+Here's a step by step guide to build the base structure of the sink yourself.
+
+## Step 1 - Assemble and Customise the Base
+
+**1** **Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There will be some changes you need to make in order to customise the piece into a sink.
+
+**2** **Modify top tray (Turn it into a washbasin)**:
+	* Position top tray at your child's height. See if you can use some of the existing holes that are in place for the top tray. We were able to make use of the existing holes as my son was sufficiently high. 
+	* Use the higher wall pieces from the bottom tray as the side and back walls for the washbasin (top tray). Keeping the front piece lower will allow easier access to the faucet.
+	* This new combination of the top tray requires at least 4 additional holes. If you’re doing all the holes yourself, you’ll need to drill 8 holes. 
+	* Mark the locations for the holes, measuring the distances of the new holes to the existing ones.
+	* Drill the additional holes. Only drill on the inside of metal frame only (holes don’t need to go all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly)
+	* Install the tray sides. Only install the sides of the tray, and not the central piece since we’ll insert the washbasin there. For the holes you drilled, you can use the included plastic caps—no need to use extra screws. For existing holes, Ikea provided some screws to use.
+- Install the other trays as in original instructions with the remaining pieces.
+
+⠀**Result**: A customized cart ready for washbasin installation.
+
+## Step 2
+
+- **Prepare the Washbasin**
+- **Converting Plastic Tray to Washbasin**
+
+Now we'll convert the plastic tray into a washbasin.
+
+
+⠀**Steps**:
+**1** **Drill drainage holes**: Create 7 holes on each side of the tray at the deepest edge points to ensure complete water drainage.
+**2** **Check fit**: The modified tray should now resemble a washbasin and sit properly on the top cart frame.
+**3** **Drill pivot holes**: Locate the center of the plastic tray and drill holes slightly offset from center (to avoid the plastic bumper). Ensure holes align on both sides (offset the bumper to the same side on both sides) and match your screw diameter.
+**4** **Secure nuts**:
+	* Screw nuts onto bolts in the washbasin holes
+	* Apply hot glue around each nut to lock in position
+	* Once glue dries, remove screws—nuts stay permanently fixed
+
+⠀**Result**: Washbasin ready for pivot installation with secure, glued-in-place nuts.
+
+
+
+import ImageCarousel from '@site/src/components/ImageCarousel';
+
+<ImageCarousel
+  images={[
+    { src: '/img/sink1.jpg', alt: 'Melt the plastic', caption: 'Step 1: Melt the plastic' },
+    { src: '/img/try.JPG', alt: 'Shape the shell', caption: 'Step 2: Shape the shell' },
+    { src: '/img/step3.png', alt: 'Add electronics', caption: 'Step 3: Add electronics' },
+    { src: '/img/step4.png', alt: 'Finished mouse', caption: 'Step 4: Final product' },
+  ]}
+/>
+<!-- truncate -->
+
+:::info[materials]
+Here's a list of materials needed to construct this sink:
+:::

docs/Build_Guide/first.md

@@ -0,0 +1,62 @@
+---
+title: List of materials (BOM)
+description: Add description
+sidebar_position: 1
+---
+
+Here's a step by step guide to build the base structure of the sink yourself.
+
+### 1 - Body of materials
+
+Here's a list of the materials needed to construct a Piqpoc sink.
+
+**For the base structure:**
+
+- [Ikea Nissafors](https://www.ikea.com/es/es/p/nissafors-carrito-verde-claro-10606782/#content): A similar tray would do. But we chose this one for the ease of adjusting its height, its size fitting nicely with the plastic washbasin tray. 
+- 2 x [containers to store water](https://www.ikea.com/es/es/p/samla-caja-con-tapa-transparente-s09440839/): One for clean and one for dirty water: We used these from IKEA for convenience of getting all materials from the same store. Any bucket that fits would do the job. We'd suggest to use at least 5 liters for less frequent refilling.
+- 3/3.5/4 mm x 10/15mm screws with nuts: You'd need just 3 set of screws and nuts.
+- [Plastic tray from Ikea](https://www.ikea.com/es/es/p/trofast-caja-naranja-claro-20582083/): Feel free to use the colour combination you like.
+
+
+**For running water:**
+
+- [DC pump (5V)](https://www.amazon.es/dp/B0B24G8WP7)
+- 1m of hose in adequate size for the pump you purchase, can be found in local hardware or aquiarium stores
+
+**For the Switch Box**
+
+- [Illuminated Pushbutton](https://es.aliexpress.com/item/1005003112570775.html): We used a button like this one, but purchased it from the local electronics shop instead. Would suggest you to do the same. 
+- [USB-C adapter](https://www.amazon.es/dp/B0CDBZZQBZ): One of these did the job for us. If you have any existing USB adapter, you can use it. 
+- Small size [Tupperbox](https://lilihomepiera.com/products/fiambrera-rectangular-ubox-0-4l-%E7%9A%84%E5%89%AF%E6%9C%AC?variant=47440211804508) to use as a switchbox. (alternatively you can 3d print the switch box using the files we provide)
+
+:::info[materials]
+Alternatively you can 3d print your swtichbox using the files we provide. ADD FILE HERE!
+:::
+
+**For the Faucet**
+
+* A water toy that can be converted to a faucet: You can be creative to use any toy that can resemble or function as a faucet. The only criteria is that it needs to guide the hose from the pump into the washbasin. We used [one of these toys](https://www.amazon.es/dp/B0BN7B9G9R) that we had at home.
+
+:::info[materials]
+Alternatively you can 3d print your faucet using the files we provide. ADD FILE HERE!
+:::
+
+
+**Tools**
+- Drill and drill bits for metal and plastic (5.5mm, 3.5mm)
+- Solder iron
+- Hot glue gun with the accompanying size of glue
+
+
+
+import ImageCarousel from '@site/src/components/ImageCarousel';
+
+<ImageCarousel
+  images={[
+    { src: '/img/sink1.jpg', alt: 'Melt the plastic', caption: 'Step 1: Melt the plastic' },
+    { src: '/img/try.JPG', alt: 'Shape the shell', caption: 'Step 2: Shape the shell' },
+    { src: '/img/step3.png', alt: 'Add electronics', caption: 'Step 3: Add electronics' },
+    { src: '/img/step4.png', alt: 'Finished mouse', caption: 'Step 4: Final product' },
+  ]}
+/>
+<!-- truncate -->

docs/Build_Guide/first2.md

@@ -0,0 +1,57 @@
+---
+title: Building the base
+description: Step-by-step guide to creating a mouse from plastic waste
+---
+
+import StepWithCarousel from '@site/src/components/StepWithCarousel';
+
+[[INSERT VIDEO HERE]]
+
+## Step 1: Assemble and Customise the Base Structure
+
+<StepWithCarousel
+  images={[
+    { src: '/img/sink1.jpg', caption: 'Sorting plastic' },
+    { src: '/img/try.jpg', caption: 'Heating in oven' },
+  ]}
+>
+
+  <p>
+	**Unpack**: Open the Ikea Nissafors box and follow the included manual to build the base structure. There are some changes you need to make in order to customise it into a sink that are explained in this page.
+
+	**2** **Modify top tray (Turn it into a washbasin)**:
+		* Position top tray at your child's height. The washbasin should be below their elbow height. In this heaight, see if you can use the existing holes of the top tray. We were able to make use of the existing holes as my son was sufficiently high. 
+		* Use the higher wall pieces from the bottom tray as the side and back walls for the washbasin (top tray). Keeping a lower front piece will allow easier access to the faucet.
+		* This new combination of the top tray requires at least 4 additional holes, if you make use of the existing holes. If not, you need to drill all 8 holes yourself.
+		* Mark the locations for the holes. If you're using existing holes, measure the distances of the new holes to the existing ones using a side piece of the tray.
+		* Drill the additional holes. Only drill on the inside of metal frame (no need to drill all the way through). Use a 5.5mm bit (or use 5mm and expand the hole slightly) to be able to use the provided plastic pieces.
+		* Install the top tray. Only install the sides, and not the central surface since we’ll insert the washbasin there. For existing holes, use the scres Ikea provided.
+	- Install the other trays as in original instructions with the remaining pieces.
+
+	⠀**Result**: A customized cart ready for washbasin installation.
+  </p>
+</StepWithCarousel>
+
+<StepWithCarousel
+  title="Step 2: Shape the Mold"
+  images={[
+    { src: '/img/step2a.jpg', caption: 'Pressing into mold' },
+    { src: '/img/step2b.jpg', caption: 'Cooling' },
+  ]}
+>
+  <p>
+    Once melted, transfer the plastic into the mold. Apply pressure evenly and let it cool for 10–15 minutes to harden.
+  </p>
+</StepWithCarousel>
+
+<StepWithCarousel
+  title="Step 3: Assemble the Electronics"
+  images={[
+    { src: '/img/step3a.jpg', caption: 'Installing buttons' },
+    { src: '/img/step3b.jpg', caption: 'Final test' },
+  ]}
+>
+  <p>
+    Fit the electronic components like switches, scroll wheel, and PCB into the shell. Secure everything with screws or clips, then test the mouse.
+  </p>
+</StepWithCarousel>

docs/Build_Guide/switch.md

@@ -0,0 +1,29 @@
+---
+id: Switch
+title: Switch
+description: Save water without limiting your child's play with water.
+---
+
+Here's a step by step guide to build the base structure of the sink yourself.
+
+### Body of materials
+
+
+
+
+
+import ImageCarousel from '@site/src/components/ImageCarousel';
+
+<ImageCarousel
+  images={[
+    { src: '/img/sink1.jpg', alt: 'Melt the plastic', caption: 'Step 1: Melt the plastic' },
+    { src: '/img/try.JPG', alt: 'Shape the shell', caption: 'Step 2: Shape the shell' },
+    { src: '/img/step3.png', alt: 'Add electronics', caption: 'Step 3: Add electronics' },
+    { src: '/img/step4.png', alt: 'Finished mouse', caption: 'Step 4: Final product' },
+  ]}
+/>
+<!-- truncate -->
+
+:::info[materials]
+Here's a list of materials needed to construct this sink:
+:::

docs/build/first.md

@@ -1,14 +0,0 @@
----
-title: Toddler sink
-description: Save water without limiting your child's play with water.
----
-
-## A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
-
-Save water without limiting your child's play with water.
-
-<img src={require('/img/sink1.jpg').default} class="center" width="90%" />
-
-:::info[materials]
-Here's a list of materials needed to construct this sink:
-:::

docs/start.md

@@ -1,14 +1,24 @@
 ---
-title: Toddler sink
+title: What is PiqPoc?
 description: Save water without limiting your child's play with water.
+sidebar_position: 1
 ---
 
-## A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
+## A filtering nomad sink for toddlers
+
+A filtering and water circulating sink for toddlers that they can start using from 12 months and up. 
 
 Save water without limiting your child's play with water.
 
+Key features:
+
+- No waste of water during playtime.
+- Children with 12 months and up can use it themselves independently.
+- You can place it anywhere in your home or outside. No need to connect it to the water system. 
+
+Allow your child to enjoy water without wasting water.
+
+### [Insert intro video here]
+
 <img src={require('/img/sink1.jpg').default} class="center" width="90%" />
 
-:::info[materials]
-Here's a list of materials needed to construct this sink:
-:::

docusaurus.config.js

@@ -42,7 +42,9 @@ const config = {
       /** @type {import('@docusaurus/preset-classic').Options} */
       ({
         docs: {
-          sidebarPath: './sidebars.js',
+			sidebarPath: require.resolve('./sidebars.js'), // ✅ Must point to your sidebars.js
+			routeBasePath: 'docs', // or '/' if you moved docs to root
+			toc: false,
         },
         blog: {
           showReadingTime: true,

package-lock.json

@@ -12,9 +12,11 @@
         "@docusaurus/preset-classic": "3.7.0",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
+        "lucide-react": "^0.523.0",
         "prism-react-renderer": "^2.3.0",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-swipeable": "^7.0.2"
       },
       "devDependencies": {
         "@docusaurus/module-type-aliases": "3.7.0",
@@ -9951,6 +9953,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.523.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.523.0.tgz",
+      "integrity": "sha512-rUjQoy7egZT9XYVXBK1je9ckBnNp7qzRZOhLQx5RcEp2dCGlXo+mv6vf7Am4LimEcFBJIIZzSGfgTqc9QCrPSw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/markdown-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz",
@@ -15045,6 +15056,15 @@
         "react": ">=15"
       }
     },
+    "node_modules/react-swipeable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz",
+      "integrity": "sha512-v1Qx1l+aC2fdxKa9aKJiaU/ZxmJ5o98RMoFwUqAAzVWUcxgfHFXDDruCKXhw6zIYXm6V64JiHgP9f6mlME5l8w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",

package.json

@@ -18,9 +18,11 @@
     "@docusaurus/preset-classic": "3.7.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.523.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-swipeable": "^7.0.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.7.0",

sidebars.js

@@ -14,16 +14,11 @@
 
  @type {import('@docusaurus/plugin-content-docs').SidebarsConfig}
  */
-const sidebars = {
+export default {
   docs: [
-        "start",
     {
-            label: "Build your own",
-            items: ["build/first"],
-            type: "category",
-            link: { type: "generated-index" },
-            collapsed: false,
+      type: 'autogenerated',
+      dirName: '.', // '.' means the current docs folder
     },
   ],
 };
-export default sidebars;

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

src/components/ImageCarousel.module.css

@@ -0,0 +1,66 @@
+.carousel {
+  max-width: 600px;
+  margin: 2rem auto;
+  text-align: center;
+}
+
+.viewport {
+  position: relative;
+  min-height: 300px;
+}
+
+.slide {
+  display: none;
+}
+
+.slide.active {
+  display: block;
+}
+
+.slide img {
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+}
+
+.caption {
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #666;
+}
+
+.thumbnails {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.thumbnailWrapper {
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+  border-radius: 0.375rem;
+  transition: box-shadow 0.2s ease;
+}
+
+.thumbnail {
+  width: 60px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 0.375rem;
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+.thumbnailWrapper:hover .thumbnail,
+.thumbnailWrapper.activeThumbnail .thumbnail {
+  opacity: 1;
+}
+
+.activeThumbnail {
+  box-shadow: 0 0 0 2px #333;
+}

src/components/StepCarousel.js

@@ -0,0 +1,206 @@
+import React, { useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const StepCarousel = ({ 
+  steps = [],
+  showStepNumbers = true,
+  showNavigation = true,
+  showDots = true,
+  className = ""
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // Default demo data if no steps provided
+  const defaultSteps = [
+    {
+      title: "Mill the Mould",
+      description: "Download the .stp-files and the blueprints for the mould for CNC milling. Metal examples for CNC Milling: Aluminium 7050, 7075-T6, Steel 1045. CNC mill the mould according to the blueprint and insert 8x10mm Dowel pins.",
+      image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=600&h=400&fit=crop",
+      stepNumber: 1
+    },
+    {
+      title: "Inject",
+      description: "Fill the injection machine with Polypropylene, heat up for 10-12min, check the viscosity of the outcoming plastic. You need about 25g for the bottom part and 30g for the Top Part.",
+      image: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=600&h=400&fit=crop",
+      stepNumber: 2
+    },
+    {
+      title: "Demoulding",
+      description: "Unscrew the moulds, use the demoulding pockets to open the moulds, knock out the sprues, cut them and do the afterwork.",
+      image: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=600&h=400&fit=crop",
+      stepNumber: 3
+    },
+    {
+      title: "Drill the holes",
+      description: "You need to drill 2x D2mm for the button screws and 3x D2mm for the case screws. Keep attention just to drill 3mm deep. After that insert button screws.",
+      image: "https://images.unsplash.com/photo-1609592842914-b3e29c6b0b25?w=600&h=400&fit=crop",
+      stepNumber: 4
+    },
+    {
+      title: "Final Assembly",
+      description: "The final steps are inserting the lens, the circuit board and screwing the top and bottom together. Test the click and adjust button screws for the best feel.",
+      image: "https://images.unsplash.com/photo-1518709268805-4e9042af2ac1?w=600&h=400&fit=crop",
+      stepNumber: 5
+    }
+  ];
+
+  const stepsData = steps.length > 0 ? steps : defaultSteps;
+
+  const nextStep = () => {
+    setCurrentStep((prev) => (prev + 1) % stepsData.length);
+  };
+
+  const prevStep = () => {
+    setCurrentStep((prev) => (prev - 1 + stepsData.length) % stepsData.length);
+  };
+
+  const goToStep = (index) => {
+    setCurrentStep(index);
+  };
+
+  return (
+    <div className={`max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden ${className}`}>
+      {/* Main Content Area */}
+      <div className="relative">
+        {/* Image Container */}
+        <div className="relative h-96 bg-gray-100 overflow-hidden">
+          <img
+            src={stepsData[currentStep].image}
+            alt={stepsData[currentStep].title}
+            className="w-full h-full object-cover transition-opacity duration-300"
+          />
+          
+          {/* Step Number Badge */}
+          {showStepNumbers && (
+            <div className="absolute top-4 left-4 bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center font-bold text-lg shadow-lg">
+              {stepsData[currentStep].stepNumber || currentStep + 1}
+            </div>
+          )}
+
+          {/* Navigation Arrows */}
+          {showNavigation && stepsData.length > 1 && (
+            <>
+              <button
+                onClick={prevStep}
+                className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
+                aria-label="Previous step"
+              >
+                <ChevronLeft size={24} />
+              </button>
+              <button
+                onClick={nextStep}
+                className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
+                aria-label="Next step"
+              >
+                <ChevronRight size={24} />
+              </button>
+            </>
+          )}
+        </div>
+
+        {/* Content Area */}
+        <div className="p-6">
+          <h3 className="text-2xl font-bold text-gray-900 mb-3">
+            {stepsData[currentStep].title}
+          </h3>
+          <p className="text-gray-700 leading-relaxed">
+            {stepsData[currentStep].description}
+          </p>
+        </div>
+
+        {/* Dot Navigation */}
+        {showDots && stepsData.length > 1 && (
+          <div className="flex justify-center space-x-2 pb-6">
+            {stepsData.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => goToStep(index)}
+                className={`w-3 h-3 rounded-full transition-all duration-200 ${
+                  index === currentStep
+                    ? 'bg-blue-600 transform scale-125'
+                    : 'bg-gray-300 hover:bg-gray-400'
+                }`}
+                aria-label={`Go to step ${index + 1}`}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Step Counter */}
+      <div className="bg-gray-50 px-6 py-3 text-center text-sm text-gray-600 border-t">
+        Step {currentStep + 1} of {stepsData.length}
+      </div>
+    </div>
+  );
+};
+
+// Example usage component
+const ExampleUsage = () => {
+  const customSteps = [
+    {
+      title: "Prepare Your Materials",
+      description: "Gather all necessary tools and materials before starting the project. Make sure you have adequate workspace and safety equipment.",
+      image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=600&h=400&fit=crop",
+      stepNumber: 1
+    },
+    {
+      title: "Setup the Equipment",
+      description: "Configure your equipment according to the specifications. Double-check all connections and settings before proceeding.",
+      image: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=600&h=400&fit=crop",
+      stepNumber: 2
+    }
+  ];
+
+  return (
+    <div className="p-8 bg-gray-50 min-h-screen">
+      <div className="max-w-6xl mx-auto">
+        <h1 className="text-3xl font-bold text-center mb-8 text-gray-900">
+          Docusaurus Step Carousel Component
+        </h1>
+        
+        <div className="mb-12">
+          <h2 className="text-xl font-semibold mb-4 text-gray-800">Default Example</h2>
+          <StepCarousel />
+        </div>
+
+        <div className="mb-12">
+          <h2 className="text-xl font-semibold mb-4 text-gray-800">Custom Steps Example</h2>
+          <StepCarousel steps={customSteps} />
+        </div>
+
+        <div className="mb-12">
+          <h2 className="text-xl font-semibold mb-4 text-gray-800">Minimal Version (No Navigation)</h2>
+          <StepCarousel 
+            showNavigation={false} 
+            showDots={false}
+            showStepNumbers={false}
+          />
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow mt-8">
+          <h3 className="text-lg font-semibold mb-3">Usage in Docusaurus:</h3>
+          <div className="bg-gray-100 p-4 rounded font-mono text-sm">
+            <div className="text-gray-600">// In your MDX file:</div>
+            <div className="mt-2">
+              {`import StepCarousel from '@site/src/components/StepCarousel';
+
+<StepCarousel 
+  steps={[
+    {
+      title: "Step 1",
+      description: "Description here...",
+      image: "/img/step1.jpg",
+      stepNumber: 1
+    }
+  ]}
+/>`}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ExampleUsage;

src/components/StepCarousel2.js

@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+
+const StepCarousel = ({ 
+  steps = [],
+  showStepNumbers = true,
+  showNavigation = true,
+  showDots = true,
+  className = ""
+}) => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // Default demo data if no steps provided
+  const defaultSteps = [
+    {
+      title: "Mill the Mould",
+      description: "Download the .stp-files and the blueprints for the mould for CNC milling. Metal examples for CNC Milling: Aluminium 7050, 7075-T6, Steel 1045. CNC mill the mould according to the blueprint and insert 8x10mm Dowel pins.",
+      image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=600&h=400&fit=crop",
+      stepNumber: 1
+    },
+    {
+      title: "Inject",
+      description: "Fill the injection machine with Polypropylene, heat up for 10-12min, check the viscosity of the outcoming plastic. You need about 25g for the bottom part and 30g for the Top Part.",
+      image: "https://images.unsplash.com/photo-1581092160562-40aa08e78837?w=600&h=400&fit=crop",
+      stepNumber: 2
+    },
+    {
+      title: "Demoulding",
+      description: "Unscrew the moulds, use the demoulding pockets to open the moulds, knock out the sprues, cut them and do the afterwork.",
+      image: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=600&h=400&fit=crop",
+      stepNumber: 3
+    },
+    {
+      title: "Drill the holes",
+      description: "You need to drill 2x D2mm for the button screws and 3x D2mm for the case screws. Keep attention just to drill 3mm deep. After that insert button screws.",
+      image: "https://images.unsplash.com/photo-1609592842914-b3e29c6b0b25?w=600&h=400&fit=crop",
+      stepNumber: 4
+    },
+    {
+      title: "Final Assembly",
+      description: "The final steps are inserting the lens, the circuit board and screwing the top and bottom together. Test the click and adjust button screws for the best feel.",
+      image: "https://images.unsplash.com/photo-1518709268805-4e9042af2ac1?w=600&h=400&fit=crop",
+      stepNumber: 5
+    }
+  ];
+
+  const stepsData = steps.length > 0 ? steps : defaultSteps;
+
+  const nextStep = () => {
+    setCurrentStep((prev) => (prev + 1) % stepsData.length);
+  };
+
+  const prevStep = () => {
+    setCurrentStep((prev) => (prev - 1 + stepsData.length) % stepsData.length);
+  };
+
+  const goToStep = (index) => {
+    setCurrentStep(index);
+  };
+
+  const styles = {
+    container: {
+      maxWidth: '1024px',
+      margin: '0 auto',
+      backgroundColor: '#ffffff',
+      borderRadius: '8px',
+      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+      overflow: 'hidden'
+    },
+    imageContainer: {
+      position: 'relative',
+      height: '384px',
+      backgroundColor: '#f3f4f6',
+      overflow: 'hidden'
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      transition: 'opacity 0.3s ease'
+    },
+    stepBadge: {
+      position: 'absolute',
+      top: '16px',
+      left: '16px',
+      backgroundColor: '#2563eb',
+      color: 'white',
+      width: '40px',
+      height: '40px',
+      borderRadius: '50%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontWeight: 'bold',
+      fontSize: '18px',
+      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)'
+    },
+    navButton: {
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      color: 'white',
+      width: '40px',
+      height: '40px',
+      borderRadius: '50%',
+      border: 'none',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '20px',
+      fontWeight: 'bold',
+      transition: 'background-color 0.2s ease'
+    },
+    prevButton: {
+      left: '16px'
+    },
+    nextButton: {
+      right: '16px'
+    },
+    content: {
+      padding: '24px'
+    },
+    title: {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      color: '#111827',
+      marginBottom: '12px'
+    },
+    description: {
+      color: '#374151',
+      lineHeight: '1.6'
+    },
+    dotsContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+      gap: '8px',
+      paddingBottom: '24px'
+    },
+    dot: {
+      width: '12px',
+      height: '12px',
+      borderRadius: '50%',
+      border: 'none',
+      cursor: 'pointer',
+      transition: 'all 0.2s ease'
+    },
+    activeDot: {
+      backgroundColor: '#2563eb',
+      transform: 'scale(1.25)'
+    },
+    inactiveDot: {
+      backgroundColor: '#d1d5db'
+    },
+    counter: {
+      backgroundColor: '#f9fafb',
+      padding: '12px 24px',
+      textAlign: 'center',
+      fontSize: '14px',
+      color: '#6b7280',
+      borderTop: '1px solid #e5e7eb'
+    }
+  };
+
+  return (
+    <div style={{...styles.container, className}}>
+      {/* Main Content Area */}
+      <div style={{position: 'relative'}}>
+        {/* Image Container */}
+        <div style={styles.imageContainer}>
+          <img
+            src={stepsData[currentStep].image}
+            alt={stepsData[currentStep].title}
+            style={styles.image}
+          />
+          
+          {/* Step Number Badge */}
+          {showStepNumbers && (
+            <div style={styles.stepBadge}>
+              {stepsData[currentStep].stepNumber || currentStep + 1}
+            </div>
+          )}
+
+          {/* Navigation Arrows */}
+          {showNavigation && stepsData.length > 1 && (
+            <>
+              <button
+                onClick={prevStep}
+                style={{...styles.navButton, ...styles.prevButton}}
+                onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'}
+                onMouseLeave={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'}
+                aria-label="Previous step"
+              >
+                ‹
+              </button>
+              <button
+                onClick={nextStep}
+                style={{...styles.navButton, ...styles.nextButton}}
+                onMouseEnter={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'}
+                onMouseLeave={(e) => e.target.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'}
+                aria-label="Next step"
+              >
+                ›
+              </button>
+            </>
+          )}
+        </div>
+
+        {/* Content Area */}
+        <div style={styles.content}>
+          <h3 style={styles.title}>
+            {stepsData[currentStep].title}
+          </h3>
+          <p style={styles.description}>
+            {stepsData[currentStep].description}
+          </p>
+        </div>
+
+        {/* Dot Navigation */}
+        {showDots && stepsData.length > 1 && (
+          <div style={styles.dotsContainer}>
+            {stepsData.map((_, index) => (
+              <button
+                key={index}
+                onClick={() => goToStep(index)}
+                style={{
+                  ...styles.dot,
+                  ...(index === currentStep ? styles.activeDot : styles.inactiveDot)
+                }}
+                onMouseEnter={(e) => {
+                  if (index !== currentStep) {
+                    e.target.style.backgroundColor = '#9ca3af';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (index !== currentStep) {
+                    e.target.style.backgroundColor = '#d1d5db';
+                  }
+                }}
+                aria-label={`Go to step ${index + 1}`}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Step Counter */}
+      <div style={styles.counter}>
+        Step {currentStep + 1} of {stepsData.length}
+      </div>
+    </div>
+  );
+};
+
+export default StepCarousel;

src/components/StepWithCarousel.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ImageCarousel from './ImageCarousel';
+import styles from './StepWithCarousel.module.css';
+
+export default function StepWithCarousel({ title, children, images }) {
+  return (
+    <div className={styles.step}>
+      <div className={styles.text}>
+        <h2>{title}</h2>
+        {children}
+      </div>
+      <div className={styles.carousel}>
+        <ImageCarousel images={images} />
+      </div>
+    </div>
+  );
+}

src/components/StepWithCarousel.module.css

@@ -0,0 +1,18 @@
+.step {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-bottom: 3rem;
+  align-items: flex-start;
+  font-size:14px;
+}
+
+.text {
+  flex: 1;
+  min-width: 280px;
+}
+
+.carousel {
+  flex: 1;
+  min-width: 300px;
+}

src/css/custom.css

@@ -28,3 +28,15 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+/* Make sidebar text smaller */
+.theme-doc-sidebar-menu li a {
+  font-size: 0.85rem; /* Adjust size as needed */
+}
+
+/* Optional: reduce category headers too */
+.theme-doc-sidebar-menu .menu__list-item-collapsible .menu__link {
+  font-size: 0.9rem;
+}
+.menu__link--sublist-caret:after {
+    background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+}

src/pages/index.js

@@ -8,7 +8,7 @@ import Heading from '@theme/Heading';
 import styles from './index.module.css';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const {siteConfig} = useDocusaurusContext(); // test
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">

static/img/sink_diagram.svg

@@ -0,0 +1,113 @@
+<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="800" height="600" fill="#f8f9fa"/>
+  
+  <!-- Title -->
+  <text x="400" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#2c3e50">Smart Toddler Sink - Structure Schema</text>
+  
+  <!-- Main trolley frame -->
+  
+  <rect x="180" y="140" width="20" height="280" fill="#7fb069"/>
+  <rect x="600" y="140" width="20" height="280" fill="#7fb069"/>
+  <rect x="180" y="420" width="440" height="20" fill="#7fb069"/>
+  
+  <!-- Cross supports -->
+  <!--<rect x="200" y="200" width="400" height="8" fill="#7fb069"/>-->
+  <rect x="200" y="330" width="400" height="8" fill="#7fb069"/>
+  
+  <!-- Top shelf - sink basin -->
+  <rect x="206" y="110" width="390" height="40" fill="#e8f4f8" stroke="#4a90b8" stroke-width="2" rx="8"/>
+  <text x="400" y="135" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#2c3e50">Washbasin (Tiltable)</text>
+  
+  <!-- Faucet -->
+  <rect x="380" y="50" width="8" height="59" fill="#DCD86B"/>
+  <circle cx="384" cy="55" r="6" fill="#DCD86B"/>
+  <text x="396" y="60" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Faucet</text>
+  
+  <!-- Side accessories -->
+  <rect x="160" y="150" width="30" height="20" fill="#ff6b6b" rx="4"/>
+  <text x="120" y="164" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Switch</text>
+  
+  <!-- Bottom level - water containers -->
+  <rect x="220" y="210" width="170" height="120" fill="#e1f5fe" stroke="#0288d1" stroke-width="2" rx="8"/>
+  <rect x="410" y="210" width="170" height="120" fill="#C0C0C0" stroke="#A9A9A9" stroke-width="2" rx="8"/>
+  
+  <!-- Water containers
+  <rect x="240" y="240" width="130" height="70" fill="#bbdefb" stroke="#1976d2" stroke-width="2" rx="4"/>
+  <rect x="430" y="240" width="130" height="70" fill="#c8e6c8" stroke="#388e3c" stroke-width="2" rx="4"/>-->
+  
+  <!-- Pump inside clean water container -->
+  <rect x="260" y="260" width="40" height="15" fill="#333" rx="2"/>
+  <text x="280" y="270" text-anchor="middle" font-family="Arial, sans-serif" font-size="8" fill="white">PUMP</text>
+  
+  <!-- Labels for containers -->
+  <text x="305" y="290" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#1976d2">Clean Water</text>
+  <text x="305" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#1976d2">(Reusable)</text>
+  
+  <text x="495" y="290" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="#212121">Dirty Water</text>
+  <text x="495" y="305" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" fill="#212121">(Collection for disposal)</text>
+  
+  <!-- Wheels -->
+  <circle cx="220" cy="450" r="15" fill="#666" stroke="#333" stroke-width="2"/>
+  <circle cx="580" cy="450" r="15" fill="#666" stroke="#333" stroke-width="2"/>
+  
+  <!-- Flow arrows -->
+  <!-- From pump to faucet -->
+  <path d="M 280 260 Q 230 100 384 55" fill="none" stroke="#2196f3" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
+  
+  <!-- From basin to dirty water (when tilted) -->
+  <path d="M 450 150 Q 480 180 495 240" fill="none" stroke="#929292" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead-gray)"/>
+  
+  <!-- Recirculation arrow -->
+  <path d="M 300 150 Q 320 180 305 240" fill="none" stroke="#2196f3" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
+  
+  <!-- Arrow markers -->
+  <defs>
+    <marker id="arrowhead" markerWidth="6" markerHeight="8" 
+            refX="5" refY="3.5" orient="auto">
+      <polygon points="0 0, 6 3.5, 0 7" fill="#2196f3"/>
+    </marker>
+    <marker id="arrowhead-orange" markerWidth="8" markerHeight="7" 
+            refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#ff9800"/>
+    </marker>
+    <marker id="arrowhead-green" markerWidth="6" markerHeight="8" 
+            refX="5" refY="3.5" orient="auto">
+      <polygon points="0 0, 6 3.5, 0 7" fill="#4caf50"/>
+    </marker>
+    <marker id="arrowhead-gray" markerWidth="6" markerHeight="8" 
+            refX="5" refY="3.5" orient="auto">
+      <polygon points="0 0, 6 3.5, 0 7" fill="#929292"/>
+    </marker>
+  </defs>
+  
+  <!-- Legend -->
+  <rect x="50" y="500" width="300" height="74" fill="white" stroke="#ddd" stroke-width="1" rx="8"/>
+  <text x="60" y="520" font-family="Arial, sans-serif" font-size="13" font-weight="bold" fill="#2c3e50">Water Flow Legend:</text>
+  
+  <line x1="60" y1="535" x2="80" y2="535" stroke="#2196f3" stroke-width="3" stroke-dasharray="5,5" />
+  <text x="90" y="540" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Clean water circulation (play mode)</text>
+  
+  <line x1="60" y1="555" x2="80" y2="555" stroke="#929292" stroke-width="3" stroke-dasharray="5,5"/>
+  <text x="90" y="560" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Dirty water (when basin tilted to the right)</text>
+  
+  <!--<line x1="60" y1="575" x2="80" y2="575" stroke="#4caf50" stroke-width="3" stroke-dasharray="5,5"/>
+  <text x="90" y="580" font-family="Arial, sans-serif" font-size="12" fill="#2c3e50">Water reuse </text>-->
+  
+  <!-- Key features callouts -->
+  <g>
+    <!-- Callout 1 - Tiltable basin -->
+    <circle cx="500" cy="110" r="3" fill="#9c27b0"/>
+    <line x1="500" y1="110" x2="650" y2="55" stroke="#9c27b0" stroke-width="2"/>
+    <rect x="650" y="40" width="140" height="30" fill="white" stroke="#212121" stroke-width="1" rx="4"/>
+    <text x="720" y="58" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#212121">Tiltable for dual mode</text>
+  </g>
+  
+  <g>
+    <!-- Callout 2 - Portable -->
+    <circle cx="520" cy="480" r="3" fill="#9c27b0"/>
+    <line x1="520" y1="480" x2="580" y2="450" stroke="#9c27b0" stroke-width="2"/>
+    <rect x="450" y="485" width="120" height="30" fill="white" stroke="#212121" stroke-width="1" rx="4"/>
+    <text x="510" y="504" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" font-weight="bold" fill="#212121">Wheels for mobility</text>
+  </g>
+</svg>