| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Kurse | CodeCare Connect</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#4F46E5', |
| secondary: '#10B981' |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="bg-gray-50"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="container mx-auto px-4 py-12"> |
| |
| <section class="mb-20 text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6"> |
| Unsere <span class="text-primary">Vibe-Coding</span> Kurse |
| </h1> |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> |
| Entdecke unsere transformative Kursangebote, die dir helfen, therapeutische Erlebnisse mit Code zu gestalten. |
| </p> |
| </section> |
|
|
| |
| <section class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1"> |
| <img src="http://static.photos/music/640x360/10" alt="Klangwelten Kurs" 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">Einstieg</span> |
| <span class="text-sm text-gray-500">4 Wochen</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Heilende Klangwelten</h3> |
| <p class="text-gray-600 mb-4">Erlerne die Grundlagen therapeutischer Soundscapes mit visueller Programmierung.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-900">€299</span> |
| <a href="#" class="text-primary font-medium flex items-center"> |
| Details |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1"> |
| <img src="http://static.photos/abstract/640x360/15" alt="Lichtinstallation Kurs" 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">Vertiefung</span> |
| <span class="text-sm text-gray-500">6 Wochen</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Bio-Feedback Visuals</h3> |
| <p class="text-gray-600 mb-4">Emotionen als interaktive Lichtinstallationen darstellen und analysieren.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-900">€399</span> |
| <a href="#" class="text-primary font-medium flex items-center"> |
| Details |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1"> |
| <img src="http://static.photos/nature/640x360/20" alt="Sinneserfahrung Kurs" 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">Immersion</span> |
| <span class="text-sm text-gray-500">8 Wochen</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Multisensorische Räume</h3> |
| <p class="text-gray-600 mb-4">Ganzheitliche Sinneserfahrungen mit Code kreieren und steuern.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-900">€499</span> |
| <a href="#" class="text-primary font-medium flex items-center"> |
| Details |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1"> |
| <img src="http://static.photos/technology/640x360/7" alt="Grundlagen Kurs" 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">Einstieg</span> |
| <span class="text-sm text-gray-500">4 Wochen</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Vibe-Coding Grundlagen</h3> |
| <p class="text-gray-600 mb-4">Die Basis für alle multisensorischen Coding-Projekte.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-900">€249</span> |
| <a href="/grundlagen-kurs.html" class="text-primary font-medium flex items-center"> |
| Details |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1"> |
| <img src="http://static.photos/people/640x360/8" alt="Gruppenarbeit Kurs" 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">Vertiefung</span> |
| <span class="text-sm text-gray-500">5 Wochen</span> |
| </div> |
| <h3 class="text-xl font-bold mb-2">Gruppen-Interaktionen</h3> |
| <p class="text-gray-600 mb-4">Kollektive Erlebnisse für Therapie und Teambuilding.</p> |
| <div class="flex justify-between items-center"> |
| <span class="font-bold text-gray-900">€349</span> |
| <a href="#" class="text-primary font-medium flex items-center"> |
| Details |
| <i data-feather="arrow-right" class="ml-2 w-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition transform hover:-translate-y-1 bg-primary-50 border-2 border-primary-100 flex flex-col items-center justify-center p-6"> |
| <div class="text-primary mb-4"> |
| <i data-feather="mail" class="w-12 h-12"></i> |
| </div> |
| <h3 class="text-xl font-bold text-center mb-2">Individuelles Angebot</h3> |
| <p class="text-gray-600 text-center mb-4">Brauchst du einen maßgeschneiderten Kurs für dein Team?</p> |
| <a href="/kontakt.html" class="bg-primary hover:bg-primary-600 text-white px-6 py-2 rounded-lg font-medium transition"> |
| Kontakt aufnehmen |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-primary-50 rounded-2xl p-8 mb-20"> |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Dein Lernweg</h2> |
| <div class="max-w-4xl mx-auto"> |
| <div class="relative"> |
| |
| <div class="absolute left-4 top-0 bottom-0 w-1 bg-primary-200"></div> |
| |
| |
| <div class="relative flex flex-col gap-12"> |
| <div class="flex gap-6 items-start"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10"> |
| 1 |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Grundlagen</h3> |
| <p class="text-gray-600">Erlerne die Prinzipien des Vibe-Codings und erstelle deine ersten einfachen Projekte.</p> |
| </div> |
| </div> |
| |
| <div class="flex gap-6 items-start"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10"> |
| 2 |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Spezialisierung</h3> |
| <p class="text-gray-600">Wähle deinen Fokusbereich zwischen Klangwelten, Lichtinstallationen oder multisensorischen Räumen.</p> |
| </div> |
| </div> |
| |
| <div class="flex gap-6 items-start"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center z-10"> |
| 3 |
| </div> |
| <div> |
| <h3 class="text-xl font-bold mb-2">Integration</h3> |
| <p class="text-gray-600">Lerne, wie du Vibe-Coding in bestehende therapeutische Konzepte integrieren kannst.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-20"> |
| <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Häufige Fragen</h2> |
| <div class="max-w-3xl mx-auto"> |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-4"> |
| <details class="group"> |
| <summary class="flex justify-between items-center cursor-pointer"> |
| <h3 class="text-lg font-medium text-gray-900">Benötige ich Vorkenntnisse?</h3> |
| <div class="text-primary"> |
| <i data-feather="chevron-down" class="group-open:hidden block"></i> |
| <i data-feather="chevron-up" class="group-open:block hidden"></i> |
| </div> |
| </summary> |
| <p class="mt-4 text-gray-600"> |
| Unsere Einsteigerkurse sind bewusst so konzipiert, dass sie keine Programmierkenntnisse voraussetzen. Alles wird von Grund auf erklärt. Für die Fortgeschrittenenkurse empfehlen wir jedoch den Besuch der Grundlagenkurse oder vergleichbare Erfahrung. |
| </p> |
| </details> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-4"> |
| <details class="group"> |
| <summary class="flex justify-between items-center cursor-pointer"> |
| <h3 class="text-lg font-medium text-gray-900">Welche Hardware wird benötigt?</h3> |
| <div class="text-primary"> |
| <i data-feather="chevron-down" class="group-open:hidden block"></i> |
| <i data-feather="chevron-up" class="group-open:block hidden"></i> |
| </div> |
| </summary> |
| <p class="mt-4 text-gray-600"> |
| Für die meisten Kurse genügt ein moderner Computer oder Laptop. Spezielle Hardware wie Sensoren oder Controller können wir für die Kursdauer zur Verfügung stellen oder gegen eine Gebühr ausleihen. Für fortgeschrittene Projekte beraten wir dich gerne zu sinnvollen Investitionen. |
| </p> |
| </details> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-4"> |
| <details class="group"> |
| <summary class="flex justify-between items-center cursor-pointer"> |
| <h3 class="text-lg font-medium text-gray-900">Gibt es Zertifizierungen?</h3> |
| <div class="text-primary"> |
| <i data-feather="chevron-down" class="group-open:hidden block"></i> |
| <i data-feather="chevron-up" class="group-open:block hidden"></i> |
| </div> |
| </summary> |
| <p class="mt-4 text-gray-600"> |
| Ja, nach erfolgreichem Abschluss eines Kurses erhältst du ein Zertifikat von CodeCare Connect. Unsere Zertifizierungen werden von vielen Institutionen im Sozial- und Gesundheitsbereich anerkannt. |
| </p> |
| </details> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-gradient-to-r from-primary to-primary-600 text-white rounded-2xl p-8 md:p-12 text-center"> |
| <h2 class="text-3xl font-bold mb-4">Bereit für deine Vibe-Coding Reise?</h2> |
| <p class="text-lg mb-8 max-w-2xl mx-auto">Melde dich jetzt für unseren Newsletter an und erhalte eine kostenlose Einführungslektion sowie exklusive Angebote.</p> |
| <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto"> |
| <input type="email" placeholder="Deine E-Mail" class="flex-grow px-4 py-3 rounded-lg text-gray-900"> |
| <button type="submit" class="bg-secondary hover:bg-secondary-600 px-6 py-3 rounded-lg font-medium transition"> |
| Anmelden |
| </button> |
| </form> |
| </section> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| |
| <script src="components/navbar.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
