Update public/index.html

public/index.html

@@ -187,68 +187,25 @@
 .publication-list a:hover {
   text-decoration: underline;
 }
-.btn-get-started {
-  background: linear-gradient(to right, #005baa, #0088cc);
-  color: #fff;
-  padding: 12px 24px;
-  margin-right: 10px;
-  border-radius: 50px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: 0.3s ease-in-out;
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-
-.btn-get-started:hover {
-  background: linear-gradient(to right, #0088cc, #00b4d8);
-  transform: translateY(-2px);
-  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
-}
-
-.btn-watch-video {
-  color: #005baa;
-  font-weight: 600;
-  text-decoration: none;
-  gap: 8px;
-  font-size: 16px;
-  transition: 0.3s ease-in-out;
-}
-
-.btn-watch-video i {
-  font-size: 28px;
-  color: #005baa;
-  margin-right: 6px;
-  transition: transform 0.3s ease;
-}
-
-.btn-watch-video:hover i {
-  transform: scale(1.2);
-  color: #00b4d8;
+.hero-bright {
+  background: linear-gradient(135deg, #f0f4ff, #ffffff);
+  color: #1a1a1a;
+  padding: 80px 0;
 }
 
-.btn-watch-video:hover span {
-  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);
+.btn-glass-light {
+  backdrop-filter: blur(6px);
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 123, 255, 0.3);
   padding: 0.75rem 1.5rem;
   border-radius: 50px;
-  transition: background 0.3s ease;
+  transition: all 0.3s ease;
+  font-weight: 500;
 }
 
-.btn-glass:hover {
-  background: rgba(255, 255, 255, 0.2);
+.btn-glass-light:hover {
+  background: rgba(0, 123, 255, 0.1);
+  color: #0056b3;
 }
 
 .floating {
@@ -257,11 +214,10 @@
 
 @keyframes float {
   0% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
+  50% { transform: translateY(-12px); }
   100% { transform: translateY(0px); }
 }
 
-
 </style>
 
   <!-- =======================================================
@@ -306,26 +262,27 @@
   <main class="main">
 
     <!-- Hero Section -->
-    <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>
+   <section id="hero" class="hero section hero-bright text-dark 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 in der Lehre – Zukunft jetzt gestalten</h1>
+          <p class="lead mt-3" data-aos="fade-up" data-aos-delay="100">
+            Entdecke, wie das Projekt <strong>KNIGHT</strong> mit 1,9 Mio. € Förderung Lehre und Lernen transformiert.
+          </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-primary rounded-pill px-4 py-2">🧩 Arbeitspakete ansehen</a>
+            <a href="https://www.youtube.com/watch?v=blDgzP6E3uU" class="btn btn-glass-light text-primary d-flex align-items-center gap-2"><i class="bi bi-play-circle"></i> Video abspielen</a>
+          </div>
+        </div>
+        <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 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>
+  </section>
+
 <!-- /Hero Section -->
 
     <!-- About Section -->