Add home module and transition mixin to stylesheets

Included a new `@import 'modules/home';` and added a re-usable `@mixin transition` for smoother animations. Updated button styling with padding, hover effects, and transitions to enhance UI. Adjusted max-width in `.team__inner` for better layout consistency.

docs/assets/javascript/counter-animation.js

@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Funktion zum Formatieren der Zahlen mit Kommas und Plus-Zeichen
+    function formatNumber(num, includePlus = true) {
+        const formatted = num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
+        return includePlus ? formatted + '+' : formatted;
+    }
+
+    // Funktion zum Extrahieren der Zahl aus dem Text (entfernt das '+' und Kommas)
+    function extractNumber(text) {
+        return parseInt(text.replace(/,/g, '').replace('+', ''), 10);
+    }
+
+    // Funktion zum Animieren der Zähler
+    function animateCounter(counterElement, target) {
+        // Startpunkt
+        let start = 0;
+        // Dauer der Animation in Millisekunden (angepasst an die Größe der Zahl)
+        const duration = Math.min(2000 + Math.log10(target) * 300, 3000);
+        // Zeitpunkt des Starts
+        const startTime = performance.now();
+
+        // Funktion für die Animation
+        function updateCounter(currentTime) {
+            // Berechne den verstrichenen Zeitanteil (0 bis 1)
+            const elapsedTime = Math.min((currentTime - startTime) / duration, 1);
+
+            // Easing-Funktion für eine natürlichere Animation
+            const progress = easeOutQuart(elapsedTime);
+
+            // Berechne den aktuellen Wert
+            const currentValue = Math.floor(progress * target);
+
+            // Aktualisiere den Zähler mit dem Plus-Zeichen
+            counterElement.textContent = formatNumber(currentValue, true);
+
+            // Wenn die Animation noch nicht abgeschlossen ist, nächsten Frame anfordern
+            if (elapsedTime < 1) {
+                requestAnimationFrame(updateCounter);
+            } else {
+                // Stelle sicher, dass der endgültige Wert exakt dem Zielwert entspricht
+                counterElement.textContent = formatNumber(target, true);
+            }
+        }
+
+        // Easing-Funktion für eine natürlichere Animation
+        function easeOutQuart(t) {
+            return 1 - Math.pow(1 - t, 4);
+        }
+
+        // Starte die Animation
+        requestAnimationFrame(updateCounter);
+    }
+
+    // Intersection Observer zum Erkennen, wann die Zähler sichtbar werden
+    const observer = new IntersectionObserver((entries, observer) => {
+        entries.forEach(entry => {
+            // Wenn der Zähler sichtbar wird
+            if (entry.isIntersecting) {
+                const counterElement = entry.target;
+                // Extrahiere die Zielnummer aus dem Text
+                const targetText = counterElement.textContent;
+                const target = extractNumber(targetText);
+
+                // Setze den Anfangswert auf 0 mit Plus-Zeichen
+                counterElement.textContent = '0+';
+
+                // Starte die Animation
+                animateCounter(counterElement, target);
+
+                // Beobachtung beenden, damit die Animation nur einmal ausgeführt wird
+                observer.unobserve(counterElement);
+            }
+        });
+    }, {
+        threshold: 0.1 // 10% des Elements müssen sichtbar sein
+    });
+
+    // Alle Zähler beobachten
+    document.querySelectorAll('.satag--home-counter-number').forEach(counter => {
+        observer.observe(counter);
+    });
+});

docs/index.md

@@ -4,33 +4,108 @@ hide:
   - toc
 ---
 
-# <span class="satag-trademark">satware®</span> AI
+
+<div class="satag--home-landing">
+
+<!-- Section entry -->
+
+<div class="satag--home-hero entry">
+
+<h1>Willkommen zu<br /> <span class="satag-trademark">satware®</span> AI</h1>
+
+<div class="entry-text">
+<span class="satag-trademark">satware®</span> AI bietet zukunftsweisende KI-Lösungen, die Unternehmen dabei
+unterstützen, ihre Prozesse zu optimieren, Daten effektiver zu nutzen und intelligente Entscheidungen zu treffen. Unsere
+Technologien sind darauf ausgerichtet, Ihren Geschäftserfolg durch moderne, KI-gestützte Lösungen zu steigern.
+</div>
+
+<p class="hero-buttons"><a class="md-button md-button--primary" href="/demo/">Demo buchen</a> <a class="md-button" href="/zugang/">Zugang bestellen</a></p>
 
 
-## KI-gestützte Automatisierung
+<p class="screenshot-container">
-
+<img src="../assets/images/home/satware-ai-chat-screenshot.jpg" />
-  Intelligente Lösungen für die automatisierte Verarbeitung und Analyse von Daten.
+</p>
-
-
-## Smarte Datenverarbeitung
-
-  Verwandeln Sie rohe Daten in verwertbare Erkenntnisse mit modernsten KI-Algorithmen.
-
-
-## Sicherheit & Datenschutz
-
-  Alle unsere Lösungen setzen auf höchste Sicherheitsstandards und DSGVO-Konformität.
-
-
-## Maßgeschneiderte Entwicklung
-
-  Individuelle KI-Lösungen, die exakt auf Ihre Geschäftsanforderungen zugeschnitten sind.
 
 
 
-## Willkommen bei <span class="satag-trademark">satware®</span> AI
 
-<span class="satag-trademark">satware®</span> AI bietet zukunftsweisende KI-Lösungen, die Unternehmen dabei unterstützen, ihre Prozesse zu optimieren, Daten effektiver zu nutzen und intelligente Entscheidungen zu treffen. Unsere Technologien sind darauf ausgerichtet, Ihren Geschäftserfolg durch moderne, KI-gestützte Lösungen zu steigern.
+</div>
+
+<!-- end Section entry -->
+
+<!-- Section Companies -->
+
+<div class="satag--home-companies">
+
+<h2>Trusted by the world's top organizations across industries</h2>
+
+
+<div class="satag--home-companies-logo-container">
+    <div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/hammel.png" />
+    </div>
+<div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/ocupro.png" />
+    </div>
+<div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/satware-ag.png" />
+    </div>
+<div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/klinikum-worms.png" />
+    </div>
+</div>
+ <br /> 
+<div class="satag--home-companies-logo-container">
+    <div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/hammel.png" />
+    </div>
+<div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/ocupro.png" />
+    </div>
+<div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/satware-ag.png" />
+    </div>
+<div class="satag--home-companies-logo">
+        <img src="../assets/images/home/company-logos/klinikum-worms.png" />
+    </div>
+</div>
+
+ 
+</div>
+
+<!-- end Section Companies -->
+
+<!-- Section Counters -->
+
+<div class="satag--home-counters">
+
+<div class="satag--home-counters-container">
+    <div class="satag--home-counter">
+        <span class="satag--home-counter-icon"><i class="fa-thin fa-globe"></i></span>
+        <span class="satag--home-counter-number">602+</span>
+        Company AI platforms created
+    </div>
+<div class="satag--home-counter">
+        <span class="satag--home-counter-icon"><i class="fa-thin fa-layer-group"></i></span>
+        <span class="satag--home-counter-number">7,199+</span>
+        Specialized AI agents built
+    </div>
+<div class="satag--home-counter">
+        <span class="satag--home-counter-icon"><i class="fa-thin fa-arrow-trend-up"></i></span>
+        <span class="satag--home-counter-number">132,853+</span>
+        Monthly active users
+    </div>
+<div class="satag--home-counter">
+        <span class="satag--home-counter-icon"><i class="fa-thin fa-message-smile"></i></span>
+        <span class="satag--home-counter-number">785,862+</span>
+        Monthly messages sent
+    </div>
+</div>
+
+</div>
+
+<!-- end Section Counters -->
+
+</div>
+
 
-[Lösungen entdecken](#){ .md-button .md-button--primary }
-[Kontakt aufnehmen](#){ .md-button }

docs/stylesheets/extra.scss

@@ -11,6 +11,11 @@
 // Module importieren
 @import 'modules/team';
 @import 'modules/footer';
+@import 'modules/home';
+
+@mixin transition{
+  transition: all 0.5s ease;
+}
 
 // satware.ai CI-Anpassungen
 
@@ -206,6 +211,19 @@ a.headerlink{
   color: #fff !important;
   border-color: var(--md-primary-fg-color) !important;
 
+  padding: 1.7em 2.9em !important;
+  letter-spacing: 0.2rem !important;
+  font-weight: 400 !important;
+
+  @include transition;
+
+  &:hover{
+    border-color: var(--md-primary-fg-color) !important;
+    transform: translateY(8px);
+    @include transition;
+  }
+
+
   &.md-button--primary {
     background-color: var(--md-primary-fg-color);
     border-color: var(--md-primary-fg-color);
@@ -299,5 +317,6 @@ a.headerlink{
 
   &__inner {
     padding: 0.5rem;
+    max-width: 98%;
   }
 }

docs/stylesheets/modules/home.scss

@@ -0,0 +1,116 @@
+.satag--home-landing{
+
+  @mixin ohne-balken{
+    h1,h2,h3,h4,h5,h6{
+      &:after{
+        display: none;
+      }
+    }
+  }
+
+  .satag--home-hero{
+
+  .entry-text{
+    font-size: 1.2rem;
+    line-height: 2rem;
+    padding-bottom: 1rem;
+  }
+
+    //@include ohne-balken;
+
+    h1{
+      font-size: 5rem;
+      margin-bottom: 1.75rem;
+      text-align: left;
+      line-height: 100%;
+      &:after{
+        height: 12px;
+        width: 85px;
+        margin-top: 1.5rem;
+        margin-bottom: -0.2rem;
+      }
+    }
+
+    .hero-buttons{
+      text-align: left;
+      padding-bottom: 3rem;
+
+    }
+
+    //text-align: center;
+
+    .screenshot-container{
+      padding: 2rem 0;
+      text-align: center;
+    }
+
+    img{
+      border: 1px solid var(--md-primary-fg-color--light);
+      width: 100%;
+    }
+
+  }
+
+  .satag--home-companies{
+
+    width: 100vw;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    padding: 2rem 0 4rem 0;
+    background-color: var(--md-primary-fg-color);
+
+    h2{
+      padding-bottom: 1rem;
+    }
+
+    @include ohne-balken;
+
+    text-align: center;
+    .satag--home-companies-logo-container{
+      display: flex;
+      max-width: 75%;
+      margin: 0 auto;
+      .satag--home-companies-logo{
+        flex: auto;
+        img{
+          width: 80%;
+        }
+      }
+    }
+  }
+
+  .satag--home-counters{
+
+    width: 100%;
+    padding: 2rem 0 4rem 0;
+
+    h2{
+      padding-bottom: 1rem;
+    }
+
+    @include ohne-balken;
+
+    text-align: center;
+    .satag--home-counters-container{
+      display: flex;
+      .satag--home-counter{
+        flex: auto;
+        display: block;
+        .satag--home-counter-icon{
+          display: block;
+          font-size: 2rem;
+          color: var(--md-primary-fg-color--light);
+        }
+        .satag--home-counter-number{
+          display: block;
+          font-weight: 700;
+          font-size: 3rem;
+        }
+      }
+    }
+  }
+
+}

mkdocs.yml

@@ -146,10 +146,14 @@ extra:
 extra_css:
   - stylesheets/extra.css
 
+extra_javascript:
+  - assets/javascript/counter-animation.js
+
 # Navigation
 nav:
 
 
+  - Kostenlose Webinare: webinare.md
   - Demo buchen: demo.md
   - Zugang bestellen: zugang.md
   - KI-Agenten:

site/stylesheets/extra.scss

@@ -11,6 +11,11 @@
 // Module importieren
 @import 'modules/team';
 @import 'modules/footer';
+@import 'modules/home';
+
+@mixin transition{
+  transition: all 0.5s ease;
+}
 
 // satware.ai CI-Anpassungen
 
@@ -206,6 +211,19 @@ a.headerlink{
   color: #fff !important;
   border-color: var(--md-primary-fg-color) !important;
 
+  padding: 1.7em 2.9em !important;
+  letter-spacing: 0.2rem !important;
+  font-weight: 400 !important;
+
+  @include transition;
+
+  &:hover{
+    border-color: var(--md-primary-fg-color) !important;
+    transform: translateY(8px);
+    @include transition;
+  }
+
+
   &.md-button--primary {
     background-color: var(--md-primary-fg-color);
     border-color: var(--md-primary-fg-color);
@@ -299,5 +317,6 @@ a.headerlink{
 
   &__inner {
     padding: 0.5rem;
+    max-width: 98%;
   }
 }