Add/basic

docs/products/basic/app/basic-app-erste-schritte.mdx

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+title:  Erste Schritte der App
+hide_title: false
+---
+
+## App einführung

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!

docs/products/basic/basic-overview.mdx

@@ -0,0 +1,156 @@
+---
+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 { 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";
+
+export const MCUManager = () => {
+  const [activeTopTab, setActiveTopTab] = React.useState(null);
+  const [activeBottomTab, setActiveBottomTab] = React.useState('Pflegehinweise');
+
+const topTabs = ['App', 'Pinout ↗', 'Datasheet ↗'];
+const bottomTabs = ['Bauteile', 'Hardware'];
+
+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>
+          </div>  
+          )}    
+
+      <NavWhite
+        bottomTabs={bottomTabs}
+        activeTab={activeBottomTab}
+        onTabChange={setActiveBottomTab}
+      />
+
+
+{activeBottomTab === 'Bauteile' && (
+  <>
+    <ImageWithText src={basicBauteile} title="CO2-Ampel Bauteile" />
+    <h3 className="mb-4 text-gray-700 dark:text-gray-300 font-medium">
+      In der senseBox:basic enthaltene Bauteile:
+    </h3>
+    <ul className="list-disc list-inside text-gray-700 dark:text-gray-300">
+      <li>senseBox MCU-S2 (Microcontroller Unit)</li>
+      <li>Temperatur- und Luftfeuchtigkeitssensor</li>
+      <li>OLED-Display</li>
+    <li>Bluetooth-Modul</li>
+    <li>Batterie + Halterung</li>
+    <li>Anschlusskabel</li>
+    </ul>
+
+
+  </>
+)}
+
+    {activeBottomTab === 'Hardware' && (
+          <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-8">
+             <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 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.sensebox.de/docs/products/co2Ampel/aufbau/aufbau-co2Ampel-schritt-1" 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 />

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

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

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;

src/components/HomepageFeatures/index.jsx

@@ -86,6 +86,15 @@ const FeatureList = [
       </Translate>
     ),
     to: '/docs/boards/mini/mini-overview?board=mini',
+  },
+    {
+    title: translateTitle('basic'),
+    description: (
+      <Translate>
+        Digitale Welt verstehen – schon ab der Grundschule 
+      </Translate>
+    ),
+    to: '/docs/products/basic/basic-overview?board=basic',
   },
   {
     title: translateTitle(':eye'),

src/components/StepSlideshow/StepSlideshow.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { cx } from 'class-variance-authority'
+
+export default function StepSlideshow({ steps }) {
+  const [currentStep, setCurrentStep] = useState(0)
+  const [isTransitioning, setIsTransitioning] = useState(false)
+  const [direction, setDirection] = useState('next')
+
+  const changeStep = (newStep, dir) => {
+    if (isTransitioning) return
+    setDirection(dir)
+    setIsTransitioning(true)
+    setTimeout(() => {
+      setCurrentStep(newStep)
+      setIsTransitioning(false)
+    }, 300)
+  }
+
+  const nextStep = () => {
+    const newStep = (currentStep + 1) % steps.length
+    changeStep(newStep, 'next')
+  }
+
+  const prevStep = () => {
+    const newStep = (currentStep - 1 + steps.length) % steps.length
+    changeStep(newStep, 'prev')
+  }
+
+  const goToStep = (index) => {
+    if (index === currentStep) return
+    const dir = index > currentStep ? 'next' : 'prev'
+    changeStep(index, dir)
+  }
+
+  return (
+    <div className="step-slideshow w-full max-w-4xl mx-auto">
+      {/* Main Image Container */}
+      <div className="relative bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
+        {/* Navigation Arrows */}
+        <button
+          onClick={prevStep}
+          className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/90 dark:bg-gray-800/90 hover:bg-white dark:hover:bg-gray-800 rounded-full p-3 shadow-md transition-all duration-200 hover:scale-110"
+          aria-label="Vorheriger Schritt"
+        >
+          <svg className="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+          </svg>
+        </button>
+
+        <button
+          onClick={nextStep}
+          className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/90 dark:bg-gray-800/90 hover:bg-white dark:hover:bg-gray-800 rounded-full p-3 shadow-md transition-all duration-200 hover:scale-110"
+          aria-label="Nächster Schritt"
+        >
+          <svg className="w-6 h-6 text-gray-700 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </button>
+
+        {/* Step Counter */}
+        <div className="absolute top-4 right-4 z-20 bg-green text-white px-4 py-2 rounded-full text-sm font-semibold shadow-md transition-all duration-300">
+          Schritt {currentStep + 1} / {steps.length}
+        </div>
+
+        {/* Image */}
+        <div className="flex items-center justify-center min-h-[400px] overflow-hidden">
+          <img
+            key={currentStep}
+            src={steps[currentStep]}
+            alt={`Schritt ${currentStep + 1}`}
+            className={cx(
+              'max-w-full max-h-[500px] object-contain',
+              'animate-in fade-in slide-in-from-right-4 duration-300',
+              direction === 'prev' && 'slide-in-from-left-4'
+            )}
+          />
+        </div>
+      </div>
+
+      {/* Step Indicators */}
+      <div className="flex justify-center gap-3 mt-6">
+        {steps.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => goToStep(index)}
+            className={cx(
+              'transition-all duration-300 rounded-full transform',
+              currentStep === index
+                ? 'w-4 h-4 bg-green scale-110'
+                : 'w-3 h-3 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 hover:scale-110'
+            )}
+            aria-label={`Gehe zu Schritt ${index + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}

src/theme/Navbar/Content/index.js

@@ -80,6 +80,7 @@ const BoardDropdown = () => {
       bike: ":bike",
       co2: ":CO2 Ampel",
       mini: ":mini",
+      basic: "basic",
     };
 
     // Überprüfen, ob der Suchbegriff gültig ist, und Board setzen