diff --git a/public/ki-kompetenzen.html b/public/ki-kompetenzen.html
index 2f903036d0934b98f716b4bf15924deb99ce8bbc..711c5f3e8107591b2118801e9c0f7ab571a5d202 100644
--- a/public/ki-kompetenzen.html
+++ b/public/ki-kompetenzen.html
@@ -16,6 +16,28 @@
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
+ <style>
+ .hero {
+ background: url('images/hero-background.jpg') no-repeat center center;
+ background-size: cover;
+ color: white;
+ padding: 50px 0;
+ text-align: center;
+ }
+
+ .card {
+ margin-bottom: 20px;
+ }
+
+ .video-container {
+ text-align: center;
+ }
+
+ .video-container iframe {
+ width: 100%;
+ height: 315px;
+ }
+ </style>
</head>
<body>
<header id="header" class="header d-flex align-items-center fixed-top">
@@ -38,52 +60,58 @@
</div>
</header>
<main>
- <section class="container">
- <p>
- <br>
- </p>
- <p>
- <br>
- </p>
- <div>
+ <section class="hero">
+ <div class="container">
<h1>KI Kompetenzen</h1>
- <p>Auf dieser Seite erfahren Sie, welche KI-Kompetenzen benötigt werden und wie diese erfasst werden können.</p>
- <p>Weitere Details werden hier bald ergänzt.</p>
+ <p>Die Schlüsselkompetenzen im Umgang mit künstlicher Intelligenz für Hochschul- und Unternehmenskontexte.</p>
</div>
- <div>
- <h2>Verantwortliche Personen</h2>
- <ul>
- <li>Prof. Dr. Tobias Popović</li>
- <li>Dr. Diana Arfeli</li>
- <li>Maximilian Weber</li>
- <li>Sunita Hirsch</li>
- <li>Tatyana Podgayetskaya</li>
- </ul>
- </div>
- <div>
- <h2>Unsere Vorgehensweise</h2>
- <ol>
- <li>KI-Kompetenzen ermitteln und sortieren</li>
- <li>Regelmäßige Weiterbildungsangebote für Mitarbeitende und Studierende</li>
- <li>KI-Zertifikat als Anreiz für kompetenzorientiertes Lernen im Kontext künstlicher Intelligenz</li>
- </ol>
+ </section>
+
+ <section class="container mt-5">
+ <div class="accordion" id="competenceAccordion">
+ <div class="accordion-item">
+ <h2 class="accordion-header" id="headingOne">
+ <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Unsere Vorgehensweise
+ </button>
+ </h2>
+ <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#competenceAccordion">
+ <div class="accordion-body">
+ <ol>
+ <li>KI-Kompetenzen ermitteln und sortieren</li>
+ <li>Regelmäßige Weiterbildungsangebote für Mitarbeitende und Studierende</li>
+ <li>KI-Zertifikat als Anreiz für kompetenzorientiertes Lernen im Kontext künstlicher Intelligenz</li>
+ </ol>
+ </div>
+ </div>
+ </div>
+ <!-- Add more accordion items as needed -->
</div>
- <div>
- <h2>Unsere KI-Kompetenzmatrix</h2>
- <p>Beschreibung der Matrix, die technische und ethische Kompetenzen abbildet und in den Hochschulqualifikationsrahmen integriert ist.</p>
+ </section>
+
+ <section class="container mt-5">
+ <div class="row">
+ <div class="col-md-4">
+ <div class="card">
+ <img src="images/kompetenzmatrix.png" class="card-img-top" alt="KI-Kompetenzmatrix">
+ <div class="card-body">
+ <h5 class="card-title">KI-Kompetenzmatrix</h5>
+ <p class="card-text">Ein detaillierter Überblick über die erforderlichen KI-Kompetenzen, unterteilt in technische und ethische Bereiche.</p>
+ </div>
+ </div>
+ </div>
+ <!-- Add more cards as needed -->
</div>
- <div>
- <h2>Schulungen und Zertifikate</h2>
- <p>Details zu den Schulungen, dem KI-Zertifikat und wie die erlangten Kompetenzen dokumentiert und validiert werden.</p>
+ </section>
+
+ <section class="container mt-5">
+ <div class="video-container">
+ <iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
</div>
</section>
</main>
+
<footer>
<div class="container">
<p>Um zur Startseite zurückzukehren, klicken Sie bitte auf den folgenden Link:</p>
- <a href="index.html">Zurück zur Startseite</a>
- <p>© 2024 KNIGHT Project. All rights reserved.</p>
- </div>
- </footer>
-</body>
-</html>
+ <a