changes.txt #9.2 & #9.4: team hero + members/friends appreciation

#9.2 Full-width auto-rotating team hero (crossfade every 4.5s, transparent blue
overlay) directly under the About Us title — 11 landscape photos supplied by MSOS.

#9.4 "Our members & friends" appreciation section after Mission & Vision: a
contained photo carousel + name chips. Photos and names are PLACEHOLDERS
(names in "First L." format) pending the full members list.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

css/pages/_about.css

@@ -461,4 +461,49 @@
     .faq-cta-container { padding: 32px; }
     .faq-cta-container h3 { font-size: 18px; }
     .faq-cta-container p { font-size: 16px; line-height: 24px; }
-}
+}
+/* ==========================================================================
+   Full-bleed auto-rotating team hero (under the About Us title)
+   ========================================================================== */
+.about-hero {
+    position: relative; left: 50%; transform: translateX(-50%);
+    width: 100vw; height: clamp(280px, 42vw, 520px);
+    overflow: hidden; margin: 4px 0 8px;
+}
+.about-hero-slide {
+    position: absolute; inset: 0; z-index: 1;
+    background-size: cover; background-position: center;
+    opacity: 0; transition: opacity 1.4s ease;
+}
+.about-hero-slide.is-active { opacity: 1; }
+.about-hero-overlay {
+    position: absolute; inset: 0; z-index: 2; pointer-events: none;
+    background: linear-gradient(180deg, rgba(45, 115, 140, 0.52) 0%, rgba(28, 84, 105, 0.60) 100%);
+}
+@media (prefers-reduced-motion: reduce) {
+    .about-hero-slide { transition: none; }
+}
+
+/* ==========================================================================
+   Appreciation to members & friends (photo carousel + names)
+   ========================================================================== */
+.appreciation-section { padding: 84px 24px 96px; background: #FFFFFF; text-align: center; }
+.appreciation-section > .page-header-section { margin-bottom: 36px; padding: 0; background: transparent; }
+.appreciation-section h2 { font-size: 36px; font-weight: 600; color: #101828; margin: 0 0 12px; }
+.appr-lead { font-size: 18px; line-height: 28px; color: #667085; max-width: 720px; margin: 0 auto; }
+/* Contained variant of the crossfade hero (overrides the full-bleed .about-hero) */
+.appreciation-hero {
+    position: relative; left: auto; transform: none;
+    width: 100%; max-width: 1000px; margin: 0 auto 34px;
+    height: clamp(220px, 32vw, 380px); border-radius: 18px; overflow: hidden;
+}
+.appreciation-names {
+    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px;
+    max-width: 900px; margin: 0 auto;
+}
+.appr-name {
+    display: inline-block; padding: 8px 16px; border-radius: 999px;
+    background: #F2F7F9; border: 1px solid #E1ECF0; color: #2D5F72;
+    font-size: 15px; font-weight: 600;
+}
+.appreciation-note { font-size: 13px; color: #98A2B3; margin: 26px auto 0; font-style: italic; }

en/about-us/index.html

@@ -200,6 +200,22 @@
             </div>
         </section>
 
+        <!-- Auto-rotating team hero -->
+        <section class="about-hero" aria-label="MSOS team moments">
+                <div class="about-hero-slide is-active" style="background-image:url('../../images/about-hero-01.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-02.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-03.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-04.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-05.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-06.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-07.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-08.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-09.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-10.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-11.webp')"></div>
+            <div class="about-hero-overlay"></div>
+        </section>
+
         <!-- Leadership Team Section -->
         <section class="team-section">
             <div class="page-header-section">
@@ -344,6 +360,30 @@
         </section>
 
         <!-- FAQ Call to Action Section -->
+        <!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
+        <section class="appreciation-section">
+            <div class="page-header-section">
+                <h2>Our members & friends</h2>
+                <p class="appr-lead">MSOS is its people. With gratitude to everyone who has been part of our story — and everyone still writing it with us.</p>
+            </div>
+            <div class="about-hero appreciation-hero" aria-label="MSOS members and friends">
+                <div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
+                <div class="about-hero-overlay"></div>
+            </div>
+            <div class="appreciation-names">
+                <span class="appr-name">Kristijan P.</span>
+                <span class="appr-name">Lea J.</span>
+                <span class="appr-name">Marko A.</span>
+                <span class="appr-name">Marija K.</span>
+                <span class="appr-name">Monika V.</span>
+            </div>
+            <p class="appreciation-note">Placeholder — the full list of members and friends is being compiled.</p>
+        </section>
+
         <section class="faq-cta-section">
              <div class="faq-cta-container">
                 <div class="avatar-group">

main.js

@@ -1101,6 +1101,25 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    /**
+     * ===================================================================
+     * ABOUT US TEAM HERO (auto-rotating crossfade slideshow)
+     * ===================================================================
+     */
+    function setupAboutHero() {
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+        document.querySelectorAll('.about-hero').forEach(function (hero) {
+            const slides = hero.querySelectorAll('.about-hero-slide');
+            if (slides.length < 2) return;
+            let i = 0;
+            setInterval(function () {
+                slides[i].classList.remove('is-active');
+                i = (i + 1) % slides.length;
+                slides[i].classList.add('is-active');
+            }, 4500);
+        });
+    }
+
     /**
      * ===================================================================
      * 8. ZAGON FUNKCIJ PO NALOŽITVI STRANI
@@ -1111,6 +1130,7 @@ document.addEventListener('DOMContentLoaded', function() {
     setupLanguageSuggestion();
     setupNewsletter();
     setupHubCarousel();
+    setupAboutHero();
     setupLightbox();
 
 });

mk/about-us/index.html

@@ -200,6 +200,22 @@
             </div>
         </section>
 
+        <!-- Auto-rotating team hero -->
+        <section class="about-hero" aria-label="Моменти од тимот на МСОС">
+                <div class="about-hero-slide is-active" style="background-image:url('../../images/about-hero-01.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-02.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-03.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-04.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-05.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-06.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-07.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-08.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-09.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-10.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-11.webp')"></div>
+            <div class="about-hero-overlay"></div>
+        </section>
+
         <!-- Leadership Team Section -->
         <section class="team-section">
             <div class="page-header-section">
@@ -344,6 +360,30 @@
         </section>
 
         <!-- FAQ Call to Action Section -->
+        <!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
+        <section class="appreciation-section">
+            <div class="page-header-section">
+                <h2>Нашите членови и пријатели</h2>
+                <p class="appr-lead">МСОС се неговите луѓе. Со благодарност до сите што биле дел од нашата приказна — и до сите што сè уште ја пишуваат со нас.</p>
+            </div>
+            <div class="about-hero appreciation-hero" aria-label="Членови и пријатели на МСОС">
+                <div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
+                <div class="about-hero-overlay"></div>
+            </div>
+            <div class="appreciation-names">
+                <span class="appr-name">Kristijan P.</span>
+                <span class="appr-name">Lea J.</span>
+                <span class="appr-name">Marko A.</span>
+                <span class="appr-name">Marija K.</span>
+                <span class="appr-name">Monika V.</span>
+            </div>
+            <p class="appreciation-note">Привремено — целосниот список на членови и пријатели е во подготовка.</p>
+        </section>
+
         <section class="faq-section">
             <div class="faq-footer">
                 <div class="avatar-group">

si/about-us/index.html

@@ -200,6 +200,22 @@
             </div>
         </section>
 
+        <!-- Auto-rotating team hero -->
+        <section class="about-hero" aria-label="Trenutki ekipe MSOS">
+                <div class="about-hero-slide is-active" style="background-image:url('../../images/about-hero-01.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-02.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-03.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-04.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-05.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-06.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-07.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-08.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-09.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-10.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/about-hero-11.webp')"></div>
+            <div class="about-hero-overlay"></div>
+        </section>
+
         <!-- Leadership Team Section -->
         <section class="team-section">
             <div class="page-header-section">
@@ -344,6 +360,30 @@
         </section>
 
         <!-- FAQ Call to Action Section -->
+        <!-- Appreciation to members & friends (photos are placeholders; names pending full list) -->
+        <section class="appreciation-section">
+            <div class="page-header-section">
+                <h2>Naši člani in prijatelji</h2>
+                <p class="appr-lead">MSOS so njegovi ljudje. S hvaležnostjo vsem, ki so bili del naše zgodbe — in vsem, ki jo še pišejo z nami.</p>
+            </div>
+            <div class="about-hero appreciation-hero" aria-label="Člani in prijatelji MSOS">
+                <div class="about-hero-slide is-active" style="background-image:url('../../images/event4-img-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/msnl-1.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event4-image2.webp')"></div>
+                <div class="about-hero-slide" style="background-image:url('../../images/event3-photo-5.webp')"></div>
+                <div class="about-hero-overlay"></div>
+            </div>
+            <div class="appreciation-names">
+                <span class="appr-name">Kristijan P.</span>
+                <span class="appr-name">Lea J.</span>
+                <span class="appr-name">Marko A.</span>
+                <span class="appr-name">Marija K.</span>
+                <span class="appr-name">Monika V.</span>
+            </div>
+            <p class="appreciation-note">Začasno — celoten seznam članov in prijateljev je v pripravi.</p>
+        </section>
+
         <section class="faq-cta-section">
              <div class="faq-cta-container">
                 <div class="avatar-group">