Schritt 1: Datei in dein Next.js Projekt legen

Speichere den kompletten Code dieser Datei unter folgendem Pfad in deinem Next.js-Projekt ab:
public/hydroponik-3d.html

Schritt 2: Fertige Next.js Bento-Card Komponente einfügen

Durch den Parameter ?bento=true werden die Export-Buttons oben rechts automatisch ausgeblendet, sodass nur die interaktive Simulation im Bento-Karten-Look zu sehen ist:

// components/HydroponicBentoCard.tsx
export default function HydroponicBentoCard() {
  return (
    <div className="relative col-span-1 md:col-span-2 lg:col-span-3 h-[600px] rounded-3xl overflow-hidden border border-[#e7e3da] bg-[#faf8f5] shadow-xl">
      <iframe
        src="/hydroponik-3d.html?bento=true"
        title="3D Hydroponik Wachstums-Simulation"
        className="w-full h-full border-0"
        loading="lazy"
      />
    </div>
  );
}