bitte nur vibe-coding kurse, keine klassische Programmierung

about.html

@@ -29,13 +29,13 @@
         <section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-20">
             <div class="md:w-1/2">
                 <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
-                    Coding <span class="text-primary">meets</span> Soziale Arbeit
+                    Vibe-Coding <span class="text-primary">Transformation</span>
                 </h1>
                 <p class="text-lg text-gray-600 mb-8">
-                    Entdecke wie Technologie deine Arbeit in der Sozialen Arbeit verbessern kann. 
-                    Lerne die Grundlagen des Programmierens in einer unterstützenden Umgebung.
+                    Entdecke wie sinnliche Technologieerlebnisse therapeutische Prozesse unterstützen. 
+                    Erschaffe immersive Räume mit intuitiven Coding-Tools.
                 </p>
-                <div class="flex gap-4">
+<div class="flex gap-4">
                     <a href="#kurse" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition">
                         Kursangebote
                     </a>
@@ -45,37 +45,37 @@
                 </div>
             </div>
             <div class="md:w-1/2">
-                <img src="http://static.photos/education/1024x576/1" alt="Teamarbeit" class="rounded-xl shadow-xl">
-            </div>
+                    <img src="http://static.photos/music/1024x576/30" alt="Klanginstallation" class="rounded-xl shadow-xl">
+</div>
         </section>
 
         <!-- Features Section -->
         <section class="mb-20">
-            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Warum Coding lernen?</h2>
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Vibe-Coding Prinzipien</h2>
             <div class="grid md:grid-cols-3 gap-8">
                 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                     <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="code" class="text-primary"></i>
+                        <i data-feather="headphones" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Effizienz steigern</h3>
-                    <p class="text-gray-600">Automatisiere repetitive Aufgaben und konzentriere dich auf das Wesentliche.</p>
+                    <h3 class="text-xl font-semibold mb-2">Sinnliche Erfahrung</h3>
+                    <p class="text-gray-600">Ganzheitliche Erlebnisse durch multisensorische Stimulation.</p>
                 </div>
                 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                     <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="users" class="text-primary"></i>
+                        <i data-feather="activity" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Neue Möglichkeiten</h3>
-                    <p class="text-gray-600">Erschließe digitale Hilfsmittel für deine Klienten und Projekte.</p>
+                    <h3 class="text-xl font-semibold mb-2">Bio-Resonanz</h3>
+                    <p class="text-gray-600">Körperliche Reaktionen in Echtzeit sichtbar machen.</p>
                 </div>
                 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                     <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="trending-up" class="text-primary"></i>
+                        <i data-feather="moon" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Karrierechancen</h3>
-                    <p class="text-gray-600">Erweitere dein Profil mit gefragten Digitalkompetenzen.</p>
+                    <h3 class="text-xl font-semibold mb-2">Entspannungstechnik</h3>
+                    <p class="text-gray-600">Meditative Zustände durch audiovisuelle Synchronisation fördern.</p>
                 </div>
             </div>
-        </section>
+</section>
 
         <!-- Courses Section -->
         <section id="kurse" class="mb-20">

index.html

@@ -29,11 +29,11 @@
         <section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-20">
             <div class="md:w-1/2">
                 <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
-                    Vibe-Coding <span class="text-primary">Harmony</span> Flow
+                    Vibe-Coding <span class="text-primary">Sinnes</span> Welten
                 </h1>
                 <p class="text-lg text-gray-600 mb-8">
-                    Entdecke die heilende Kraft von kreativem Coding mit Musik, Licht und interaktiven Visuals. 
-                    Erschaffe berührende Erlebnisse für deine Klienten durch intuitive Technologie.
+                    Tauche ein in die transformative Kraft von Klang, Licht und Interaktion. 
+                    Erschaffe therapeutische Erlebnisse mit intuitiven Coding-Tools.
                 </p>
 <div class="flex gap-4">
                     <a href="#kurse" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition">
@@ -48,47 +48,46 @@
                 <img src="http://static.photos/music/1024x576/1" alt="Interaktive Klanginstallation" class="rounded-xl shadow-xl">
             </div>
 </section>
-        <!-- Features Section -->
+        <!-- Vibe-Coding Features -->
         <section class="mb-20">
-            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Vibe-Coding Superkräfte</h2>
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Vibe-Coding Dimensionen</h2>
             <div class="grid md:grid-cols-3 gap-8">
                 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                     <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                         <i data-feather="music" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Sound Healing</h3>
-                    <p class="text-gray-600">Erstelle therapeutische Klanglandschaften mit einfachen Code-Blöcken.</p>
+                    <h3 class="text-xl font-semibold mb-2">Klangwelten</h3>
+                    <p class="text-gray-600">Therapeutische Frequenzen mit visuellen Code-Blöcken komponieren.</p>
                 </div>
                 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                     <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="activity" class="text-primary"></i>
+                        <i data-feather="sun" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Bio-Feedback</h3>
-                    <p class="text-gray-600">Visualisiere Emotionen durch interaktive Licht- und Soundinstallationen.</p>
+                    <h3 class="text-xl font-semibold mb-2">Licht-Choreografien</h3>
+                    <p class="text-gray-600">Atmosphärische Beleuchtungsszenen synchron zu Klängen.</p>
                 </div>
                 <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
                     <div class="bg-primary-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
-                        <i data-feather="cpu" class="text-primary"></i>
+                        <i data-feather="heart" class="text-primary"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Tangible Interfaces</h3>
-                    <p class="text-gray-600">Baue berührungsempfindliche Installationen ohne komplexe Programmierung.</p>
+                    <h3 class="text-xl font-semibold mb-2">Bio-Resonanz</h3>
+                    <p class="text-gray-600">Körperliche Reaktionen in Echtzeit visualisieren.</p>
                 </div>
             </div>
 </section>
-
-        <!-- Courses Section -->
+        <!-- Vibe-Coding Courses Section -->
         <section id="kurse" class="mb-20">
-            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Unsere Kursangebote</h2>
+            <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Vibe-Coding Erlebnisse</h2>
             <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <img src="http://static.photos/workspace/640x360/2" alt="Grundlagenkurs" class="w-full h-48 object-cover">
+                    <img src="http://static.photos/music/640x360/10" alt="Klangwelten" class="w-full h-48 object-cover">
                     <div class="p-6">
                         <div class="flex items-center mb-2">
-                            <span class="bg-secondary-100 text-secondary-800 text-xs px-2 py-1 rounded-full mr-2">Anfänger</span>
-                            <span class="text-sm text-gray-500">8 Wochen</span>
+                            <span class="bg-secondary-100 text-secondary-800 text-xs px-2 py-1 rounded-full mr-2">Einstieg</span>
+                            <span class="text-sm text-gray-500">4 Wochen</span>
                         </div>
-                        <h3 class="text-xl font-bold mb-2">Programmieren für Einsteiger</h3>
-                        <p class="text-gray-600 mb-4">Lerne die Grundkonzepte des Programmierens ohne Vorkenntnisse.</p>
+                        <h3 class="text-xl font-bold mb-2">Heilende Klangwelten</h3>
+                        <p class="text-gray-600 mb-4">Erschaffe therapeutische Soundscapes mit visueller Programmierung.</p>
                         <a href="#" class="text-primary font-medium flex items-center">
                             Mehr erfahren
                             <i data-feather="arrow-right" class="ml-2 w-4"></i>
@@ -96,14 +95,14 @@
                     </div>
                 </div>
                 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <img src="http://static.photos/technology/640x360/3" alt="Datenanalyse" class="w-full h-48 object-cover">
+                    <img src="http://static.photos/abstract/640x360/15" alt="Lichtinstallation" class="w-full h-48 object-cover">
                     <div class="p-6">
                         <div class="flex items-center mb-2">
-                            <span class="bg-secondary-100 text-secondary-800 text-xs px-2 py-1 rounded-full mr-2">Fortgeschritten</span>
+                            <span class="bg-secondary-100 text-secondary-800 text-xs px-2 py-1 rounded-full mr-2">Vertiefung</span>
                             <span class="text-sm text-gray-500">6 Wochen</span>
                         </div>
-                        <h3 class="text-xl font-bold mb-2">Datenanalyse für Sozialarbeiter</h3>
-                        <p class="text-gray-600 mb-4">Wie du Daten für Berichte und Anträge effektiv nutzt.</p>
+                        <h3 class="text-xl font-bold mb-2">Bio-Feedback Visuals</h3>
+                        <p class="text-gray-600 mb-4">Emotionen als interaktive Lichtinstallationen darstellen.</p>
                         <a href="#" class="text-primary font-medium flex items-center">
                             Mehr erfahren
                             <i data-feather="arrow-right" class="ml-2 w-4"></i>
@@ -111,14 +110,14 @@
                     </div>
                 </div>
                 <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition">
-                    <img src="http://static.photos/people/640x360/4" alt="Webentwicklung" class="w-full h-48 object-cover">
+                    <img src="http://static.photos/nature/640x360/20" alt="Sinneserfahrung" class="w-full h-48 object-cover">
                     <div class="p-6">
                         <div class="flex items-center mb-2">
-                            <span class="bg-secondary-100 text-secondary-800 text-xs px-2 py-1 rounded-full mr-2">Mittel</span>
-                            <span class="text-sm text-gray-500">10 Wochen</span>
+                            <span class="bg-secondary-100 text-secondary-800 text-xs px-2 py-1 rounded-full mr-2">Immersion</span>
+                            <span class="text-sm text-gray-500">8 Wochen</span>
                         </div>
-                        <h3 class="text-xl font-bold mb-2">Einfache Webprojekte</h3>
-                        <p class="text-gray-600 mb-4">Erstelle Websites für deine Organisation oder Projekte.</p>
+                        <h3 class="text-xl font-bold mb-2">Multisensorische Räume</h3>
+                        <p class="text-gray-600 mb-4">Ganzheitliche Sinneserfahrungen mit Code kreieren.</p>
                         <a href="#" class="text-primary font-medium flex items-center">
                             Mehr erfahren
                             <i data-feather="arrow-right" class="ml-2 w-4"></i>
@@ -126,7 +125,7 @@
                     </div>
                 </div>
             </div>
-        </section>
+</section>
 
         <!-- Testimonials -->
         <section class="bg-primary-50 rounded-2xl p-8 mb-20">