Update public/index.html

public/index.html

@@ -233,6 +233,34 @@
   color: #00b4d8;
 }
 
+.bg-ai-gradient {
+  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
+  color: white;
+}
+
+.btn-glass {
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 0.75rem 1.5rem;
+  border-radius: 50px;
+  transition: background 0.3s ease;
+}
+
+.btn-glass:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.floating {
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
 
 </style>
 
@@ -278,26 +306,27 @@
   <main class="main">
 
     <!-- Hero Section -->
-    <section id="hero" class="hero section">
-
-      <div class="container">
-        <div class="row gy-4">
-          <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center">
-            <h1 data-aos="fade-up">Künstliche Assistenz für Lehrende und Studierende</h1>
-            <p data-aos="fade-up" data-aos-delay="100">Wie lehren und lernen wir in der Zukunft? 1,9 Millionen Förderung für das Projekt „KNIGHT – Künstliche Intelligenz für die Lehre an der HFT Stuttgart“</p>
-            <div class="d-flex flex-column align-items-start gap-3" data-aos="fade-up" data-aos-delay="200">
-              <a href="#about" class="btn-get-started">Jetzt starten <i class="bi bi-arrow-right"></i></a>
-              <a href="#services" class="btn-get-started">Arbeitspakete ansehen <i class="bi bi-arrow-right"></i></a>
-              <a href="https://www.youtube.com/watch?v=blDgzP6E3uU" class="glightbox btn-watch-video d-flex align-items-center justify-content-center ms-0 ms-md-4 mt-4 mt-md-0"><i class="bi bi-play-circle"></i><span>Video abspielen</span></a>
-            </div>
-          </div>
-          <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-out">
-            <img src="assets/img/knight.png" class="img-fluid animated d-none d-md-block" alt="">
-          </div>
+    <section id="hero" class="hero section bg-ai-gradient text-white position-relative overflow-hidden">
+  <div class="container">
+    <div class="row gy-4 align-items-center">
+      <div class="col-lg-6 order-2 order-lg-1 d-flex flex-column justify-content-center text-start">
+        <h1 class="display-5 fw-bold" data-aos="fade-up">KI für Lehre und Lernen</h1>
+        <p class="lead mt-3" data-aos="fade-up" data-aos-delay="100">
+          Wie lehren und lernen wir in Zukunft? <strong>1,9 Mio. € Förderung</strong> für das Projekt <em>KNIGHT</em> an der HFT Stuttgart.
+        </p>
+        <div class="d-flex flex-column align-items-start gap-3 mt-4" data-aos="fade-up" data-aos-delay="200">
+          <a href="#about" class="btn btn-primary rounded-pill px-4 py-2 shadow">🚀 Jetzt starten</a>
+          <a href="#services" class="btn btn-outline-light rounded-pill px-4 py-2">🧩 Arbeitspakete ansehen</a>
+          <a href="https://www.youtube.com/watch?v=blDgzP6E3uU" class="btn btn-glass text-white d-flex align-items-center gap-2"><i class="bi bi-play-circle"></i> Video abspielen</a>
         </div>
       </div>
-
-    </section><!-- /Hero Section -->
+      <div class="col-lg-6 order-1 order-lg-2" data-aos="zoom-out">
+        <img src="assets/img/knight.png" class="img-fluid animated floating" alt="KI Illustration">
+      </div>
+    </div>
+  </div>
+</section>
+<!-- /Hero Section -->
 
     <!-- About Section -->