Add testimonials section with interactive functionality

Introduced a testimonials section to the homepage, including JavaScript for interactive switching and automatic cycling, as well as responsive styles in SCSS. Users can now view dynamic testimonials with associated images and text.

docs/assets/javascript/testimonials.js

@@ -0,0 +1,43 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Testimonial-Wechsel-Funktionalität
+    const testimonialImages = document.querySelectorAll('.satag--home-testimonial-image-wrapper');
+    const testimonialTexts = document.querySelectorAll('.satag--home-testimonials-text');
+
+    // Funktion zum Wechseln des aktiven Testimonials
+    function switchTestimonial(id) {
+        // Entferne 'active' Klasse von allen Bildern und Texten
+        testimonialImages.forEach(img => img.classList.remove('active'));
+        testimonialTexts.forEach(text => text.classList.remove('active'));
+
+        // Füge 'active' Klasse zum ausgewählten Bild und Text hinzu
+        document.querySelector(`.satag--home-testimonial-image-wrapper[data-testimonial-id="${id}"]`).classList.add('active');
+        document.querySelector(`.satag--home-testimonials-text[data-testimonial-id="${id}"]`).classList.add('active');
+    }
+
+    // Event-Listener für Klicks auf die Bilder
+    testimonialImages.forEach(img => {
+        img.addEventListener('click', function() {
+            const id = this.getAttribute('data-testimonial-id');
+            switchTestimonial(id);
+        });
+    });
+
+    // Optional: Automatischer Wechsel alle 5 Sekunden
+    let currentId = 1;
+    const totalTestimonials = testimonialImages.length;
+
+    function autoSwitchTestimonial() {
+        currentId = currentId % totalTestimonials + 1;
+        switchTestimonial(currentId);
+    }
+
+    // Kommentiere die nächste Zeile aus, wenn du keinen automatischen Wechsel möchtest
+    const intervalId = setInterval(autoSwitchTestimonial, 5000);
+
+    // Optional: Stoppe den automatischen Wechsel, wenn der Benutzer mit einem Testimonial interagiert
+    testimonialImages.forEach(img => {
+        img.addEventListener('click', function() {
+            clearInterval(intervalId);
+        });
+    });
+});

docs/index.md

@@ -106,6 +106,77 @@ Technologien sind darauf ausgerichtet, Ihren Geschäftserfolg durch moderne, KI-
 
 <!-- end Section Counters -->
 
+<!-- start section testimonials -->
+<div class="satag--home-testimonials-container">
+    <h2>Let teams do more, faster</h2>
+
+    <div class="satag--home-testimonials">
+
+<div class="satag--home-testimonials-text-container">
+            <!-- Testimonial-Texte mit IDs zur Identifizierung -->
+            <div class="satag--home-testimonials-text active" data-testimonial-id="1">
+                <img class="satag--home-testimonial-text-logo" src="../../assets/images/home/testimonials/satware-ag.png" alt="Traffic Builders Logo">
+                <blockquote>
+                    "We try to incorporate supporting our consultants with their specific tasks into TypingMind Custom by creating custom plugins to help with some of our more time-consuming tasks so TypingMind becomes more of a one-stop-shop for us."
+                </blockquote>
+                <div class="satag--home-testimonial-author">
+                    <span class="satag--home-testimonial-name">Amber Swier</span><br />
+                    <span class="satag--home-testimonial-title">Copywriter/Content Marketer at Traffic Builders</span>
+                </div>
+            </div>
+
+            <div class="satag--home-testimonials-text" data-testimonial-id="2">
+                <img class="satag--home-testimonial-text-logo" src="../../assets/images/home/testimonials/satware-ag.png" alt="Traffic Builders Logo">
+
+                <blockquote>
+                    "satware AI has transformed how our team collaborates on complex projects. The ability to have specialized AI agents for different tasks has cut our research and documentation time in half."
+                </blockquote>
+                <div class="satag--home-testimonial-author">
+                    <span class="satag--home-testimonial-name">Emma Johnson</span><br />
+                    <span class="satag--home-testimonial-title">Project Manager at Company 2</span>
+                </div>
+            </div>
+            
+            <div class="satag--home-testimonials-text" data-testimonial-id="3">
+                        <img class="satag--home-testimonial-text-logo" src="../../assets/images/home/testimonials/satware-ag.png" alt="Traffic Builders Logo">
+        
+        <blockquote>
+                    "The integration capabilities of satware AI with our existing tools made adoption seamless. Our team productivity has increased by 35% since implementation, and the custom agents continue to learn our specific needs."
+                </blockquote>
+                <div class="satag--home-testimonial-author">
+                    <span class="satag--home-testimonial-name">Michael Schmidt</span><br />
+                    <span class="satag--home-testimonial-title">CTO at Company 3</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="satag--home-testimonials-images">
+            <!-- Bilder mit data-testimonial-id Attribut zur Identifizierung -->
+            <div class="satag--home-testimonial-image-wrapper active" data-testimonial-id="1">
+                <img src="../../assets/images/team/jane-alesi.jpg" alt="Person 1" class="satag--home-testimonial-image">
+                <div class="satag--home-testimonial-logo">
+                    <img src="../../assets/images/home/company-logos/satware-ag.png" alt="Traffic Builders Logo">
+                </div>
+            </div>
+            <div class="satag--home-testimonial-image-wrapper" data-testimonial-id="2">
+                <img src="../../assets/images/team/eddi-alesi.jpg" alt="Person 2" class="satag--home-testimonial-image">
+                <div class="satag--home-testimonial-logo">
+                    <img src="../../assets/images/home/company-logos/satware-ag.png" alt="Company 2 Logo">
+                </div>
+            </div>
+            <div class="satag--home-testimonial-image-wrapper" data-testimonial-id="3">
+                <img src="../../assets/images/team/luna-alesi.jpg" alt="Person 3" class="satag--home-testimonial-image">
+                <div class="satag--home-testimonial-logo">
+                    <img src="../../assets/images/home/company-logos/satware-ag.png" alt="Company 3 Logo">
+                </div>
+            </div>
+        </div>
+        
+        
+    </div>
+</div>
+<!-- end section testimonials -->
+
 </div>
 
 

docs/stylesheets/extra.scss

@@ -12,6 +12,7 @@
 @import 'modules/team';
 @import 'modules/footer';
 @import 'modules/home';
+@import 'modules/testimonials';
 
 @mixin transition{
   transition: all 0.5s ease;
@@ -68,6 +69,30 @@
   --md-typeset-a-color: #9d65cf;             // Helleres Violett für Links
 }
 
+::-moz-selection {
+  background: var(--md-primary-fg-color);;
+  color: #fff;
+}
+::selection {
+  background: var(--md-primary-fg-color);;
+  color: #fff;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #d0d0d0;
+  border-radius: 0;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--md-primary-fg-color);
+}
+
 h1,h2,h3,h4,h5,h6 {
   color: #fff;
   a{
@@ -93,6 +118,29 @@ h1,h2,h3{
   color: #fff;
 }
 
+.md-search-result .md-typeset {
+  color: #fff;
+}
+
+.md-tabs{
+  color: #fff !important;
+}
+.md-tabs__link{
+  opacity: 1;
+}
+
+.md-search__form{
+  input::placeholder {
+    color: #fff !important;
+  }
+}
+
+
+
+.md-search-result__meta{
+  background-color: #000;
+}
+
 h1{
   &:after{
 

docs/stylesheets/modules/home.scss

@@ -13,7 +13,8 @@
   .entry-text{
     font-size: 1.2rem;
     line-height: 2rem;
-    padding-bottom: 1rem;
+    padding-bottom: 1.6rem;
+    padding-top: 1.6rem;
   }
 
 
@@ -27,7 +28,7 @@
       &:after{
         height: 12px;
         width: 85px;
-        margin-top: 1‚rem;
+        margin-top: 1.3rem;
         margin-bottom: -0.2rem;
       }
     }
@@ -125,12 +126,15 @@
 body{
   &.home{
     background-image: url(../assets/images/home/bg.jpg);
-    background-size: 50%;
+    background-size: 40%;
     background-repeat: no-repeat;
     background-position: top;
+
+    .md-header, .md-tabs {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
   }
-  .md-header, .md-tabs {
+
-    background-color: transparent;
-    box-shadow: none;
-  }
 }

docs/stylesheets/modules/testimonials.scss

@@ -0,0 +1,169 @@
+// Testimonials Section
+.satag--home-testimonials-container {
+  max-width: 1200px;
+  margin: 4rem auto;
+  padding: 0 1rem;
+
+  h2 {
+    text-align: left;
+    font-size: 2.5rem;
+    margin-bottom: 3rem;
+  }
+}
+
+.satag--home-testimonials {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+}
+
+// Text-Container (links)
+.satag--home-testimonials-text-container {
+  flex: 1;
+  position: relative;
+  min-height: 250px;
+
+  @media (min-width: 768px) {
+    flex: 0 0 60%;
+  }
+}
+
+.satag--home-testimonials-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.5s ease, visibility 0.5s ease;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  blockquote {
+
+    font-style: normal;
+    margin-bottom: 1.5rem;
+    color: #fff;
+    border-left: none !important;
+    //border-left: 4px solid var(--md-primary-fg-color, #9c27b0);
+    padding-left: 0 !important;
+    font-size: 1.2rem;
+    line-height: 2rem;
+    //padding-bottom: 1.6rem;
+    //padding-top: 1.6rem;
+
+  }
+}
+
+.satag--home-testimonial-author {
+  margin-top: 1rem;
+}
+
+.satag--home-testimonial-text-logo{
+  max-width: 120px !important;
+}
+
+.satag--home-testimonial-name {
+  font-weight: bold;
+  margin-bottom: 0.25rem;
+}
+
+.satag--home-testimonial-title {
+  font-size: 0.9rem;
+  color: #666;
+}
+
+// Bilder-Container (rechts)
+.satag--home-testimonials-images {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+
+  @media (min-width: 768px) {
+    flex: 0 0 40%;
+    justify-content: flex-end;
+  }
+}
+
+.satag--home-testimonial-image-wrapper {
+  position: relative;
+  width: 180px;
+  height: 340px;
+  overflow: hidden;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: all 0.3s ease;
+  border: 1px solid transparent;
+  border-radius: 0; // Leicht abgerundete Ecken statt Kreis
+  border-color: var(--md-primary-fg-color--dark);
+  img{
+    filter: grayscale(1);
+    //@include transition;
+  }
+
+
+  &.active {
+    opacity: 1;
+    border-color: var(--md-primary-fg-color, #9c27b0);
+    transform: scale(1.05);
+    img{
+      filter: grayscale(0);
+      //@include transition;
+    }
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  @media (max-width: 767px) {
+    width: 100px;
+    height: 150px;
+  }
+}
+
+.satag--home-testimonial-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.satag--home-testimonial-logo {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: transparent;
+  border-radius: 50%;
+  padding: 5px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+
+  img {
+    max-width: 100px;
+    max-height: 100px;
+  }
+}
+
+// Responsive Anpassungen
+@media (max-width: 767px) {
+  .satag--home-testimonials-text-container {
+    min-height: 300px;
+  }
+
+  .satag--home-testimonials-images {
+    flex-wrap: wrap;
+  }
+}

mkdocs.yml

@@ -149,6 +149,7 @@ extra_css:
 extra_javascript:
   - assets/javascript/counter-animation.js
   - assets/javascript/body-classes.js
+  - assets/javascript/testimonials.js
 
 
 # Navigation

site/stylesheets/extra.scss

@@ -12,6 +12,7 @@
 @import 'modules/team';
 @import 'modules/footer';
 @import 'modules/home';
+@import 'modules/testimonials';
 
 @mixin transition{
   transition: all 0.5s ease;
@@ -68,6 +69,30 @@
   --md-typeset-a-color: #9d65cf;             // Helleres Violett für Links
 }
 
+::-moz-selection {
+  background: var(--md-primary-fg-color);;
+  color: #fff;
+}
+::selection {
+  background: var(--md-primary-fg-color);;
+  color: #fff;
+}
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #d0d0d0;
+  border-radius: 0;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--md-primary-fg-color);
+}
+
 h1,h2,h3,h4,h5,h6 {
   color: #fff;
   a{
@@ -93,6 +118,29 @@ h1,h2,h3{
   color: #fff;
 }
 
+.md-search-result .md-typeset {
+  color: #fff;
+}
+
+.md-tabs{
+  color: #fff !important;
+}
+.md-tabs__link{
+  opacity: 1;
+}
+
+.md-search__form{
+  input::placeholder {
+    color: #fff !important;
+  }
+}
+
+
+
+.md-search-result__meta{
+  background-color: #000;
+}
+
 h1{
   &:after{