sensebox · Thiemann96 · Jun 1, 2026 · Jun 2, 2026 · Jun 2, 2026 · Jun 3, 2026
diff --git a/docs/boards/mcus2/mcus2-in-betrieb-nehmen.mdx b/docs/boards/mcus2/mcus2-in-betrieb-nehmen.mdx
@@ -3,21 +3,63 @@ sidebar_position: 2
 title: Die MCU S2 in Betrieb nehmen
 hide_title: false
 ---
+
+import React from 'react'
+import { NavGreen } from '@site/src/components/Nav/Nav'
+import ImageWithText from "@site/src/components/ImageWithText/ImageWithText";
+import usbImg from "@site/static/img/blockly-bilder/inbetriebnahme/s2/1.png";
+import akkuImg from "@site/static/img/blockly-bilder/inbetriebnahme/s2/2.png";
+
+export const PowerSupplyManager = () => {
+  const [activeTab, setActiveTab] = React.useState('USB-Kabel');
+
+  const tabs = ['USB-Kabel', 'Akku'];
+
+  return (
+    <div className="my-8 flex flex-col space-y-8 w-full max-w-none">
+      <NavGreen 
+        topTabs={tabs}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      />
+
+      {activeTab === 'USB-Kabel' && (
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">USB-C Kabel</h3>
+            <p className="text-gray-700 dark:text-gray-200 mb-4">
+              Du kannst die senseBox mit Hilfe des beiliegenden USB-C-Kabels mit Strom versorgen. Diese Möglichkeit ist die einfachste, wenn du sowieso am Computer programmierst.
+            </p>
+            <p className="text-gray-700 dark:text-gray-200 mb-6">
+              Stecke das kleinere Ende des USB-Kabels in den USB-Anschluss des senseBox MCU S2. Dieser befindet sich oben neben dem roten Reset-Knopf. Das andere Ende des Kabels wird in den USB-Anschluss deines Computers oder einer Powerbank gesteckt.
+            </p>
+            <div className="flex justify-center">
+              <ImageWithText src={usbImg} title="USB-C Stromversorgung" size="xl" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {activeTab === 'Akku' && (
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">Akku (JST-Stecker)</h3>
+            <p className="text-gray-700 dark:text-gray-200 mb-4">
+              Wenn du deine senseBox über einen Akku mit Strom versorgen möchtest, kannst du dies über den zweipoligen JST-Stecker auf der senseBox MCU S2 tun.
+            </p>
+            <p className="text-gray-700 dark:text-gray-200 mb-6">
+              Stecke dazu einfach den JST-Stecker des Akkus in den JST-Anschluss auf der senseBox MCU S2. Dieser befindet sich oben, neben dem USB-Anschluss.
+            </p>
+            <div className="flex justify-center">
+              <ImageWithText src={akkuImg} title="Akku Stromversorgung (JST-Stecker)" size="xl" />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
 ## Die senseBox mit Strom versorgen
-<div>
-<p>
-Um die senseBox zu verwenden, muss sie natürlich mit Strom versorgt werden. Es gibt zwei Möglichkeiten die senseBox mit Strom zu versorgen:
-</p>
-<h3> 1. USB-Kabel</h3>
-<p>
-Du kannst die senseBox mit Hilfe des beiliegenden USB-C-Kabels mit Strom versorgen. Diese Möglichkeit ist die einfachste, wenn du sowieso am Computer programmierst.
-Stecke das kleinere Ende des USB-Kabels in den USB-Anschluss des senseBox MCU S2. Dieser befindet sich oben neben dem roten Reset-Knopf. Das andere Ende des Kabels wird in den USB-Anschluss deines Computers oder einer Powerbank gesteckt.
-</p>
-<img src="/img/blockly-bilder/inbetriebnahme/s2/1.png" alt="akku"/>
-<h3> 2. Akku       </h3>
-<p>
-Wenn du deine senseBox über einen Akku mit Strom versorgen möchtest, kannst du dies über den zweipoligen JST-Stecker auf der senseBox MCU S2 tun. Stecke dazu einfach den JST-Stecker des Akkus in den JST-Anschluss auf der senseBox MCU S2. Dieser befindet sich oben, neben dem USB-Anschluss.
-</p>
-<img src="/img/blockly-bilder/inbetriebnahme/s2/2.png" alt="akku"/>
 
-</div>
+<PowerSupplyManager />
diff --git a/docs/products/basic/app/basic-app-erste-schritte.mdx b/docs/products/basic/app/basic-app-erste-schritte.mdx
@@ -0,0 +1,18 @@
+---
+sidebar_position: 2
+title:  Erste Schritte der App
+hide_title: false
+---
+import StepSlideshow from '@site/src/components/StepSlideshow/StepSlideshow'
+
+## App einführung
+
+<StepSlideshow
+  steps={[
+
+    '/img/basic/app-erste-schritte-0.svg',
+    '/img/basic/app-erste-schritte-1.svg',
+    '/img/basic/app-erste-schritte-2.svg',
+    '/img/basic/app-erste-schritte-3.svg',
+    '/img/basic/app-erste-schritte-4.svg',
+  ]}/>
diff --git a/docs/products/basic/basic-erste-schritte.mdx b/docs/products/basic/basic-erste-schritte.mdx
@@ -0,0 +1,32 @@
+---
+sidebar_position: 1
+title: Die ersten Schritte mit der Basic
+hide_title: false
+---
+
+import StepSlideshow from '@site/src/components/StepSlideshow/StepSlideshow'
+
+## Erste Schritte
+
+Willkommen bei deiner senseBox:basic! Diese Anleitung führt dich Schritt für Schritt durch die Inbetriebnahme deines Boards. Du lernst, wie du die senseBox richtig anschließt, konfigurierst und mit deinem ersten Programm zum Laufen bringst.
+
+### Folge diesen Schritten
+
+Nutze die Pfeile oder die Punkte unterhalb der Bilder, um durch die einzelnen Schritte zu navigieren. Nimm dir Zeit für jeden Schritt und stelle sicher, dass du alles richtig ausgeführt hast, bevor du zum nächsten übergehst.
+
+<StepSlideshow
+  steps={[
+    '/img/basic/erste-schritte-1.svg',
+    '/img/basic/erste-schritte-2.svg',
+    '/img/basic/erste-schritte-3.svg',
+    '/img/basic/erste-schritte-4.svg',
+    '/img/basic/erste-schritte-5.svg',
+    '/img/basic/erste-schritte-6.svg',
+    '/img/basic/erste-schritte-7.svg',
+
+  ]}
+/>
+
+### Was kommt als Nächstes?
+
+Nachdem du diese ersten Schritte erfolgreich abgeschlossen hast, bist du bereit, deine senseBox zu programmieren und eigene Projekte umzusetzen. Schau dir die weiteren Tutorials an, um mehr über die Möglichkeiten deiner senseBox zu erfahren!
diff --git a/docs/products/basic/basic-overview.mdx b/docs/products/basic/basic-overview.mdx
@@ -0,0 +1,185 @@
+---
+title: senseBox:basic
+hide_title: true
+---
+
+import React from 'react'
+import ImageWithText from '@site/src/components/ImageWithText/ImageWithText'
+import Ampel from '@site/static/img/co2ampel/image1.jpg'
+import AmpelBauteile from '@site/static/img/co2ampel/image2.jpg'
+import playStoreIcon from '@site/static/img/playstore_icon.png'
+import iosStoreIcon from '@site/static/img/ios_store.png'
+import basicRendering from '@site/static/img/basic/senseBoxbasic_Rendering04.png'
+import ButtonWithText from '@site/src/components/ButtonWithText/ButtonWithText'
+import PlacematViewer from '@site/src/components/PlacematViewer/PlacematViewer'
+import { NavGreen, NavWhite, NavBlocks } from '@site/src/components/Nav/Nav'
+import {
+  PortsOverview,
+  PortItem,
+} from '@site/src/components/PortsOverview/PortsOverview'
+import basicApp from '@site/static/img/basic/basic_app.png'
+import basicBauteile from '@site/static/img/basic/basic_bauteile.png'
+import placemat1Side1 from '@site/static/img/basic/placemats/placemat1_1.jpg'
+import placemat1Side2 from '@site/static/img/basic/placemats/placemat1_2.jpg'
+import placemat2Side1 from '@site/static/img/basic/placemats/placemat2_1.jpg'
+import placemat2Side2 from '@site/static/img/basic/placemats/placemat2_2.jpg'
+import placemat3Side1 from '@site/static/img/basic/placemats/placemat3_1.jpg'
+import placemat3Side2 from '@site/static/img/basic/placemats/placemat3_2.jpg'
+import placemat4Side1 from '@site/static/img/basic/placemats/placemat4_1.jpg'
+import placemat4Side2 from '@site/static/img/basic/placemats/placemat4_2.jpg'
+import placemat1PDF from '@site/static/img/basic/placemats/placemat1.pdf'
+import placemat2PDF from '@site/static/img/basic/placemats/placemat2.pdf'
+import placemat3PDF from '@site/static/img/basic/placemats/placemat3.pdf'
+import placemat4PDF from '@site/static/img/basic/placemats/placemat4.pdf'
+import introductionPresentation from '@site/static/img/basic/senseBoxbasic_Start-Präsentation.pdf'
+
+export const MCUManager = () => {
+  const [activeTopTab, setActiveTopTab] = React.useState(null);
+
+const topTabs = ['App','Materialien', 'Pinout ↗', 'Datasheet ↗'];
+
+const toggleTopTab = (tab) => {
+if(tab === 'Pinout ↗' || tab === 'Datasheet ↗') {
+window.open(tab === 'Datasheet ↗' ? 'https://sensebox.de/non_img_assets/datenblaetter/pdf_output/Datenblatt-senseBox_MCU_S2.pdf/' : 'https://github.com/sensebox/senseBox-MCU-S2-ESP32S2/blob/main/hardware/2.2/SenseBox-MCU-2-2.pdf', '\_blank');
+return;
+} else {  
+ if (activeTopTab === tab) {
+setActiveTopTab(null);
+} else {
+setActiveTopTab(tab);
+}
+}
+};
+
+return (
+
+   <div className="my-8 flex flex-col space-y-8 w-full max-w-none"> 
+      <NavGreen 
+        topTabs={topTabs}
+        activeTab={activeTopTab}
+        onTabChange={toggleTopTab}
+      />
+
+          {activeTopTab === 'App' && (
+             <div>
+            <h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">Die senseBox:basic App</h2>
+
+            <p className="text-gray-700 mb-6 dark:text-gray-200">
+              Mit der senseBox:basic App können Kinder spielerisch die Welt der Sensoren erkunden. Die intuitive Benutzeroberfläche ermöglicht es, Messwerte in Echtzeit zu visualisieren, einfache Programme zu erstellen und erste Schritte in der digitalen Welt zu machen – alles direkt vom Smartphone oder Tablet aus.
+            </p>
+
+            {/* App Interface Placeholder */}
+            <ImageWithText src={basicApp} title="App-Oberfläche" />
+
+
+            {/* Store Buttons */}
+            <div className="mt-8 text-center">
+              <p className="text-gray-700 dark:text-gray-200 mb-6">
+                Die senseBox:basic App ist ab sofort kostenlos verfügbar und kann direkt heruntergeladen werden.
+              </p>
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                <a
+                  href="https://apps.apple.com/de/app/sensebox-basic"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-block hover:opacity-80 transition-opacity duration-200"
+                >
+                  <img
+                    src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/de-de?size=250x83&amp;releaseDate=1280624400&h=7e7b68fad19738b5649a1bbeffd5e22c"
+                    alt="Laden im App Store"
+                    className="h-14"
+                  />
+                </a>
+
+                <a
+                  href="https://play.google.com/store/apps/details?id=de.sensebox.basic"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-block hover:opacity-80 transition-opacity duration-200"
+                >
+                  <img
+                    src={playStoreIcon}
+                    alt="Jetzt bei Google Play"
+                    className="h-16"
+                  />
+
+                </a>
+              </div>
+                    <div className="mt-12">
+        <ButtonWithText href="/docs/products/basic/app/basic-app-erste-schritte" title="Zur App-Einführung" />
+      </div>
+            </div>
+          </div>
+          )}
+
+      {activeTopTab === 'Materialien' && (
+          <div className="py-8">
+            <div className="mb-8">
+              <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Einführungspräsentation</h3>
+              <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden mb-4">
+                <iframe
+                  src={`${introductionPresentation}#toolbar=0&navpanes=0&scrollbar=0`}
+                  className="w-full h-[600px]"
+                  title="Einführungspräsentation"
+                />
+              </div>
+              <a
+                href={introductionPresentation}
+                download
+                className="inline-flex items-center justify-center gap-2 py-3 px-6 bg-green text-white rounded-lg font-semibold transition-opacity duration-200 hover:opacity-90"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                <span>Präsentation herunterladen</span>
+              </a>
+            </div>
+            <hr className="my-8" />
+            <h3 className="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Arbeitsmaterialien</h3>
+            <PlacematViewer placemats={[
+              { title: 'Bau einer Umweltmessstation', side1: placemat4Side1, side2: placemat4Side2, downloadUrl: placemat4PDF },
+              { title: 'Würfel-Spaß', side1: placemat3Side1, side2: placemat3Side2, downloadUrl: placemat3PDF },
+              { title: 'Messung der Luftqualität', side1: placemat2Side1, side2: placemat2Side2, downloadUrl: placemat2PDF },
+              { title: 'Party-Beleuchtung', side1: placemat1Side1, side2: placemat1Side2, downloadUrl: placemat1PDF },
+            ]} />
+          </div>
+       )}
+
+      <div className="mt-8">
+        <h2 className="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100">Hardware</h2>
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+             <NavBlocks href="/docs/hardware/accessoires/display" title="OLED Display" />
+              <NavBlocks href="/docs/hardware/bee/bluetooth-bee" title="Bluetooth-Bee" />
+              <NavBlocks href="/docs/hardware/sensors/umweltsensor" title="Umweltsensor" />
+
+             <NavBlocks href="/docs/hardware/accessoires/rgb-led" title="RGB-LED" />
+        </div>
+      </div>
+
+   </div>
+  );
+}; 
+
+
+<div className="flex flex-col md:flex-row items-start justify-between mb-8 mt-12">
+  <div className="flex-1">
+    <h1 className="text-4xl font-bold text-black dark:text-gray-100">
+     senseBox:basic
+    </h1>
+
+   <p className="text-lg text-gray-700 dark:text-gray-300 mb-7">
+Kinder wachsen heute ganz selbstverständlich mit digitaler Technik auf. Doch wie funktioniert sie eigentlich? Die senseBox:basic als neuer Bausatz der senseBox:familie konzipiert für den Einsatz ab der Grundschule bietet einen einfachen Einstieg in die Welt von Sensoren und Programmierung, ohne zu überfordern. Mit der senseBox:basic lernen Kinder ab der Grundschule spielerisch erste Grundlagen der Programmierung als Basis für weiterführende Themen wie IoT, Datenanalyse oder komplexere Programmierunglogiken kennen. So wird aus „Technik benutzen“ ein Technik verstehen.
+    </p>
+
+<ButtonWithText
+  href="/docs/boards/mcus2/mcus2-in-betrieb-nehmen?board=basic"
+  title="Los geht's"
+/>
+
+</div>
+  <div className="ml-0 md:ml-9 mt-4 md:mt-0">
+   <ImageWithText src={basicRendering} title="senseBox:basic " />
+  </div>
+</div>
+
+<MCUManager />
diff --git a/docs/products/basic/basic-programm-hochladen.mdx b/docs/products/basic/basic-programm-hochladen.mdx
@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+title:  Programm auf die Basic hochladen
+hide_title: false
+---
+
+## Programm auf die Basic hochladen
diff --git a/sidebars.js b/sidebars.js
@@ -8,6 +8,7 @@ const homeSidebar = require('./sidebars/homeSidebar')
 const co2AmpelSidebar = require('./sidebars/co2AmpelSidebar')
 const miniSidebar = require('./sidebars/miniSidebar')
 const blocklySidebar = require('./sidebars/blocklySidebar')
+const basicSidebar = require('./sidebars/basicSidebar')
 
 export default {
   senseBoxSidebar: [
@@ -19,6 +20,7 @@ export default {
     co2AmpelSidebar,
     homeSidebar,
     miniSidebar,
+    basicSidebar,
     glossarSidebar,
   ],
 }
diff --git a/sidebars/basicSidebar.js b/sidebars/basicSidebar.js
@@ -0,0 +1,53 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+const basicSidebar = {
+  type: 'category',
+  label: 'basic',
+  key: 'basic',
+  link: {
+    type: 'doc',
+    id: 'products/basic/basic-overview',
+  },
+  items: [
+    {
+      type: 'category',
+      label: 'Erste Schritte',
+	  key: 'basic-gettingStarted',
+      items: [
+        'boards/mcus2/mcus2-in-betrieb-nehmen',
+        'products/basic/basic-erste-schritte',
+      ],
+    },
+    {
+      type: 'category',
+      label: 'App',
+    key: 'basic-app',
+    items:[
+      'products/basic/app/basic-app-erste-schritte',
+    ]
+    },
+    {
+      type: 'category',
+      label: 'Hardware',
+	  key: 'basic-hardware',
+      items: [
+        'hardware/sensors/umweltsensor',
+        'hardware/accessoires/display',
+        'hardware/bee/bluetooth-bee',
+        'hardware/sensors/umweltsensor',
+        'hardware/accessoires/rgb-led',
+      ],
+    },
+  ],
+}
+
+export default basicSidebar;