Merge pull request 'Become a Member polish: bento benefits, merged/redesigned join form, floating CTA, header + nav fixes' (#5) from kristijan-dev into develop

Reviewed-on: #5

css/pages/_member.css

@@ -50,17 +50,27 @@
 .mm-hero-photo--2 { }
 .mm-hero-photo--3 { }
 
-/* ---- benefits ---- */
+/* ---- benefits (bento grid: 7 icon cards + 2 real photo tiles) ---- */
-.mm-benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; }
+.mm-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
 .mm-benefit { background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 16px; padding: 26px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
 .mm-benefit:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(16,24,40,0.08); }
-.mm-benefit-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--mm-orange); background: #FFF1E8; margin-bottom: 16px; }
+.mm-benefit-ico { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--mm-orange); background: #FFF1E8; margin-bottom: 16px; transition: transform 0.2s ease, background 0.2s ease; }
+.mm-benefit:hover .mm-benefit-ico { transform: scale(1.08) rotate(-4deg); background: #FFE3D1; }
 .mm-benefit h3 { font-size: 18px; margin: 0 0 8px; }
 .mm-benefit p { font-size: 15px; line-height: 23px; color: #667085; margin: 0; }
 
+/* photo tiles */
+.mm-benefit-photo { position: relative; margin: 0; min-height: 240px; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 28px rgba(16,24,40,0.12); }
+.mm-benefit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
+.mm-benefit-photo:hover img { transform: scale(1.06); }
+.mm-benefit-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; color: #FFFFFF; font-weight: 700; font-size: 16px; line-height: 22px; background: linear-gradient(to top, rgba(16,24,40,0.78), rgba(16,24,40,0.15) 70%, rgba(16,24,40,0)); }
+
+@media (max-width: 900px) { .mm-benefits { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .mm-benefits { grid-template-columns: 1fr; } }
+
 /* ---- numbers ---- */
 .mm-numbers-section { background: var(--mm-teal); padding: 64px 24px; text-align: center; }
-.mm-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; max-width: 960px; margin: 28px auto 0; }
+.mm-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; max-width: 960px; margin: 44px auto 0; }
 .mm-num { color: #FFFFFF; }
 .mm-num-value { display: block; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
 .mm-num-label { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,0.85); }
@@ -75,7 +85,7 @@
 .mm-way p { font-size: 14px; line-height: 22px; color: #667085; margin: 0; }
 
 /* ---- membership in real life ---- */
-.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
+.mm-reals { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 40px; }
 .mm-real { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #EAECF0; background: #FFFFFF; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease; }
 .mm-real:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); }
 .mm-real-media { height: 170px; background: #F2F4F7; }
@@ -86,7 +96,7 @@
 .mm-real-link { font-size: 14px; font-weight: 600; color: var(--mm-orange); display: inline-flex; align-items: center; gap: 6px; }
 
 /* ---- testimonials ---- */
-.mm-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
+.mm-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; }
 .mm-test { margin: 0; background: #FFFFFF; border: 1px solid #EAECF0; border-radius: 16px; padding: 26px; box-shadow: 0 6px 16px rgba(16,24,40,0.04); }
 .mm-test blockquote { margin: 0 0 18px; font-size: 17px; line-height: 27px; color: #101828; }
 .mm-test blockquote::before { content: '\201C'; color: var(--mm-orange); font-size: 40px; line-height: 0; vertical-align: -18px; margin-right: 4px; }
@@ -94,21 +104,28 @@
 .mm-test figcaption span { font-size: 13px; color: #98A2B3; }
 
 /* ---- projects showcase ---- */
-.mm-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
+.mm-shows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
 .mm-show { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid #EAECF0; text-decoration: none; color: inherit; background: #FFFFFF; transition: transform 0.18s ease, box-shadow 0.18s ease; }
 .mm-show:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); }
 .mm-show-media { height: 180px; background: #F2F4F7; }
 .mm-show-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .mm-show h3 { font-size: 16px; margin: 0; padding: 16px 18px; line-height: 1.3; }
 
-/* ---- who can join ---- */
+/* ---- floating "Become a member" CTA (appears after the hero, hides near the form) ---- */
-.mm-who { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+.mm-sticky-cta {
-.mm-who-card { border: 1px solid #EAECF0; border-radius: 18px; padding: 30px; background: #FFFFFF; }
+    position: fixed; right: 24px; bottom: 24px; z-index: 900;
-.mm-who-card:first-child { border-color: #F6C9A8; background: linear-gradient(180deg, #FFF7F1 0%, #FFFFFF 100%); }
+    display: inline-flex; align-items: center; gap: 10px;
-.mm-who-ico { font-size: 26px; color: var(--mm-orange); margin-bottom: 14px; }
+    background: var(--mm-orange); color: #FFFFFF; font-weight: 700; font-size: 15px;
-.mm-who-card h3 { font-size: 20px; margin: 0 0 8px; }
+    padding: 14px 22px; border-radius: 999px; text-decoration: none;
-.mm-who-card p { font-size: 15px; line-height: 23px; color: #667085; margin: 0 0 16px; }
+    box-shadow: 0 10px 28px rgba(242,118,46,0.45);
-.mm-who-link { font-weight: 600; color: var(--mm-teal); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
+    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease;
+}
+.mm-sticky-cta[hidden] { display: none; }
+.mm-sticky-cta.is-hiding { opacity: 0; transform: translateY(14px); pointer-events: none; }
+.mm-sticky-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(242,118,46,0.55); }
+@media (max-width: 600px) {
+    .mm-sticky-cta { right: 16px; bottom: 16px; padding: 12px 18px; font-size: 14px; }
+}
 
 /* ---- multi-step form ---- */
 .ms-section { max-width: 760px; margin: 0 auto; padding: 72px 24px; }
@@ -130,12 +147,26 @@
 .ms-step h3 { font-size: 20px; margin: 0 0 6px; }
 .ms-hint { font-size: 14px; color: #98A2B3; margin: 0 0 16px; }
 
-.ms-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
+/* path choice: two rich, colour-accented cards (student = orange, supporter = teal) */
-.ms-path { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; border: 2px solid #EAECF0; border-radius: 16px; background: #FFFFFF; cursor: pointer; font-family: inherit; transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
+.ms-step--path { text-align: center; }
-.ms-path i { font-size: 26px; color: var(--mm-orange); }
+.ms-path-prompt { font-size: 18px; margin: 0 0 20px; }
-.ms-path strong { font-size: 16px; color: #101828; }
+.ms-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
-.ms-path:hover { border-color: #F6C9A8; transform: translateY(-2px); }
+.ms-path { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 32px 22px; border: 2px solid #EAECF0; border-radius: 18px; background: #FFFFFF; cursor: pointer; font-family: inherit; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
-.ms-path.is-selected { border-color: var(--mm-orange); background: #FFF7F1; }
+.ms-path-ico { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: transform 0.18s ease; }
+.ms-path--student .ms-path-ico { color: var(--mm-orange); background: #FFF1E8; }
+.ms-path--supporter .ms-path-ico { color: var(--mm-teal); background: #E7F1F4; }
+.ms-path strong { font-size: 18px; color: #101828; }
+.ms-path-desc { font-size: 14px; line-height: 21px; color: #667085; }
+.ms-path-go { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(4px); transition: opacity 0.18s ease, transform 0.18s ease; }
+.ms-path--student .ms-path-go { color: var(--mm-orange); }
+.ms-path--supporter .ms-path-go { color: var(--mm-teal); }
+.ms-path:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(16,24,40,0.10); }
+.ms-path:hover .ms-path-ico { transform: scale(1.06); }
+.ms-path:hover .ms-path-go, .ms-path.is-selected .ms-path-go { opacity: 1; transform: translateY(0); }
+.ms-path--student:hover, .ms-path--student.is-selected { border-color: var(--mm-orange); }
+.ms-path--supporter:hover, .ms-path--supporter.is-selected { border-color: var(--mm-teal); }
+.ms-path--student.is-selected { background: #FFF7F1; }
+.ms-path--supporter.is-selected { background: #EFF5F7; }
 
 .ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
 .ms-field { display: flex; flex-direction: column; gap: 6px; }

en/become-a-member/index.html

@@ -158,6 +158,7 @@
 <!-- END_HEADER -->
 
     <main class="member-page">
+        <a class="mm-sticky-cta" href="#join-form" hidden><i class="fas fa-user-plus" aria-hidden="true"></i> Become a member</a>
         <section class="mm-hero">
             <div class="mm-hero-text">
                 <span class="mm-eyebrow">Become a member</span>
@@ -174,6 +175,10 @@
         <section class="mm-section">
             <h2 class="mm-h2">Why become a member?</h2>
             <div class="mm-benefits">
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/event4-image2.webp" alt="Macedonian students gathered together in Ljubljana" loading="lazy">
+                    <figcaption>Real events, real friendships</figcaption>
+                </figure>
                 <article class="mm-benefit">
                     <div class="mm-benefit-ico"><i class="fas fa-people-group" aria-hidden="true"></i></div>
                     <h3>Find your people</h3><p>Meet Macedonian students across Slovenia and build friendships outside the classroom.</p>
@@ -199,9 +204,13 @@
                     <h3>Grow your network</h3><p>Meet students, alumni, professionals, institutions and partners.</p>
                 </article>
                 <article class="mm-benefit">
-                    <div class="mm-benefit-ico"><i class="fas fa-house-heart" aria-hidden="true"></i></div>
+                    <div class="mm-benefit-ico"><i class="fas fa-house-user" aria-hidden="true"></i></div>
                     <h3>Feel at home away from home</h3><p>Belong to a community where you never have to explain where you come from.</p>
                 </article>
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/msnl-3.webp" alt="Students writing their names in Cyrillic at Macedonian Student Night" loading="lazy">
+                    <figcaption>A piece of home in Slovenia</figcaption>
+                </figure>
             </div>
         </section>
 
@@ -274,18 +283,17 @@
             <div class="mm-tests">
                 <figure class="mm-test">
                     <blockquote>I joined because I wanted to meet people. I stayed because MSOS became part of my life in Slovenia.</blockquote>
-                    <figcaption><strong>Ana</strong><span>Student, Ljubljana</span></figcaption>
+                    <figcaption><strong>Ana</strong><span>Student, Maribor</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>When I moved to Slovenia, I did not know where to begin. Through MSOS I found support, friends and opportunities.</blockquote>
-                    <figcaption><strong>Marko</strong><span>Student, Maribor</span></figcaption>
+                    <figcaption><strong>Marko</strong><span>Student, Ljubljana</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>Being part of the team taught me more than any classroom. I organised events, met partners and grew a lot.</blockquote>
-                    <figcaption><strong>Elena</strong><span>Volunteer, Koper</span></figcaption>
+                    <figcaption><strong>Katerina</strong><span>Volunteer, Koper</span></figcaption>
                 </figure>
             </div>
-            <p class="mm-note mm-note--center">Sample quotes to replace with real testimonials.</p>
         </section>
 
         <section class="mm-section" id="showcase">
@@ -319,30 +327,32 @@
             <div class="mm-center"><a class="btn btn-secondary" href="../news/">See all events and projects</a></div>
         </section>
 
-        <section class="mm-section">
-            <h2 class="mm-h2">There is a place for you here</h2>
-            <div class="mm-who">
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></div><h3>For students</h3><p>Current students, future students, bachelor and master students, in every Slovenian study city.</p><a class="mm-who-link" href="#join-form">I am a student <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></div><h3>For supporters</h3><p>You do not need to be a student to support the community. Contribute through knowledge, partnerships, mentorship, volunteering, sponsorships, media or useful connections.</p><a class="mm-who-link" href="#join-form">I want to support MSOS <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-            </div>
-        </section>
-
         <section class="ms-section" id="join-form">
             <div class="ms-head">
-                <span class="ms-eyebrow">Membership form</span>
+                <span class="ms-eyebrow">Join us</span>
-                <h2>Join in a couple of minutes</h2>
+                <h2>There is a place for you here</h2>
-                <p>A few friendly questions. You do not need to decide now how active you want to be.</p>
+                <p>Choose how you would like to join. It takes a couple of minutes, and you can decide later how active you want to be.</p>
             </div>
             <form class="ms-form" novalidate>
                 <div class="ms-hp" aria-hidden="true"><label>Do not fill this in<input type="text" name="company" tabindex="-1" autocomplete="off"></label></div>
                 <div class="ms-progress" data-step="Step" data-of="of" hidden><div class="ms-progress-track"><div class="ms-progress-bar"></div></div><span class="ms-progress-text"></span></div>
                 <div class="ms-alert" hidden data-required-msg="Please fill in the required fields." data-cooldown-msg="It looks like you have just sent a request. Please give us a moment before sending another.">Please fill in the required fields.</div>
 
-                <div class="ms-step" data-step="path" data-flow="both">
+                <div class="ms-step ms-step--path" data-step="path" data-flow="both">
-                    <h3>How would you like to connect with MSOS?</h3>
+                    <h3 class="ms-path-prompt">Which one sounds like you?</h3>
                     <div class="ms-paths">
-                        <button type="button" class="ms-path" data-path="student"><i class="fas fa-graduation-cap" aria-hidden="true"></i><strong>I am a student</strong></button>
+                        <button type="button" class="ms-path ms-path--student" data-path="student">
-                        <button type="button" class="ms-path" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>I want to support MSOS</strong></button>
+                            <span class="ms-path-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
+                            <strong>I am a student</strong>
+                            <span class="ms-path-desc">Current students, future students, bachelor and master students, in every Slovenian study city.</span>
+                            <span class="ms-path-go">Choose this <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
+                        <button type="button" class="ms-path ms-path--supporter" data-path="supporter">
+                            <span class="ms-path-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></span>
+                            <strong>I want to support MSOS</strong>
+                            <span class="ms-path-desc">You do not need to be a student to support the community. Contribute through knowledge, partnerships, mentorship, volunteering, sponsorships, media or useful connections.</span>
+                            <span class="ms-path-go">Choose this <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
                     </div>
                 </div>
 

member-form.js

@@ -25,6 +25,28 @@
         nums.forEach(function (n) { io.observe(n); });
     }
 
+    /* ---- floating "Become a member" CTA: show after the hero, hide near the form/footer ---- */
+    (function () {
+        var sticky = document.querySelector('.mm-sticky-cta');
+        if (!sticky) return;
+        var hero = document.querySelector('.mm-hero');
+        var joinForm = document.getElementById('join-form');
+        var finalCta = document.querySelector('.mm-final');
+        function update() {
+            var pastHero = hero ? (window.scrollY > hero.offsetHeight - 100) : (window.scrollY > 500);
+            var nearTarget = [joinForm, finalCta].some(function (el) {
+                if (!el) return false;
+                var r = el.getBoundingClientRect();
+                return r.top < window.innerHeight * 0.85 && r.bottom > 0;
+            });
+            if (pastHero && !nearTarget) { sticky.hidden = false; sticky.classList.remove('is-hiding'); }
+            else if (!sticky.hidden) { sticky.classList.add('is-hiding'); }
+        }
+        window.addEventListener('scroll', update, { passive: true });
+        window.addEventListener('resize', update);
+        update();
+    })();
+
     /* ---- multi-step form ---- */
     var form = document.querySelector('.ms-form');
     if (!form) return;
@@ -99,7 +121,8 @@
         var last = state.idx === total - 1;
         var onPath = state.order[state.idx] === 'path';
         next.hidden = last || onPath;
-        submit.hidden = !last;
+        // never show submit on the path step (you advance by picking a card)
+        submit.hidden = !last || onPath;
         if (last) submit.textContent = state.path === 'student' ? submit.getAttribute('data-student') : submit.getAttribute('data-supporter');
         alertBox.hidden = true;
     }

mk/become-a-member/index.html

@@ -158,6 +158,7 @@
 <!-- END_HEADER -->
 
     <main class="member-page">
+        <a class="mm-sticky-cta" href="#join-form" hidden><i class="fas fa-user-plus" aria-hidden="true"></i> Стани член</a>
         <section class="mm-hero">
             <div class="mm-hero-text">
                 <span class="mm-eyebrow">Стани член</span>
@@ -174,6 +175,10 @@
         <section class="mm-section">
             <h2 class="mm-h2">Зошто да станеш член?</h2>
             <div class="mm-benefits">
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/event4-image2.webp" alt="Македонски студенти собрани во Љубљана" loading="lazy">
+                    <figcaption>Вистински настани, вистински пријателства</figcaption>
+                </figure>
                 <article class="mm-benefit">
                     <div class="mm-benefit-ico"><i class="fas fa-people-group" aria-hidden="true"></i></div>
                     <h3>Најди ги своите луѓе</h3><p>Запознај македонски студенти низ Словенија и создади пријателства надвор од предавалната.</p>
@@ -199,9 +204,13 @@
                     <h3>Прошири ја својата мрежа</h3><p>Запознај студенти, алумни, професионалци, институции и партнери.</p>
                 </article>
                 <article class="mm-benefit">
-                    <div class="mm-benefit-ico"><i class="fas fa-house-heart" aria-hidden="true"></i></div>
+                    <div class="mm-benefit-ico"><i class="fas fa-house-user" aria-hidden="true"></i></div>
                     <h3>Почувствувај се како дома</h3><p>Припаѓај на заедница каде никогаш не мораш да објаснуваш од каде доаѓаш.</p>
                 </article>
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/msnl-3.webp" alt="Студенти ги пишуваат своите имиња на кирилица на македонската студентска вечер" loading="lazy">
+                    <figcaption>Парче дома во Словенија</figcaption>
+                </figure>
             </div>
         </section>
 
@@ -274,18 +283,17 @@
             <div class="mm-tests">
                 <figure class="mm-test">
                     <blockquote>Се приклучив затоа што сакав да запознаам луѓе. Останав затоа што МСОС стана дел од мојот живот во Словенија.</blockquote>
-                    <figcaption><strong>Ana</strong><span>Студентка, Љубљана</span></figcaption>
+                    <figcaption><strong>Ana</strong><span>Студентка, Марибор</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>Кога се преселив во Словенија, не знаев од каде да почнам. Преку МСОС најдов поддршка, пријатели и можности.</blockquote>
-                    <figcaption><strong>Marko</strong><span>Студент, Марибор</span></figcaption>
+                    <figcaption><strong>Marko</strong><span>Студент, Љубљана</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>Тимската работа ме научи повеќе од која било предавална. Организирав настани, запознав партнери и многу пораснав.</blockquote>
-                    <figcaption><strong>Elena</strong><span>Волонтерка, Копер</span></figcaption>
+                    <figcaption><strong>Katerina</strong><span>Волонтерка, Копер</span></figcaption>
                 </figure>
             </div>
-            <p class="mm-note mm-note--center">Примерни цитати за замена со вистински.</p>
         </section>
 
         <section class="mm-section" id="showcase">
@@ -319,30 +327,32 @@
             <div class="mm-center"><a class="btn btn-secondary" href="../news/">Сите настани и проекти</a></div>
         </section>
 
-        <section class="mm-section">
-            <h2 class="mm-h2">Тука има место за тебе</h2>
-            <div class="mm-who">
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></div><h3>За студенти</h3><p>Сегашни и идни студенти, додипломски и магистерски, во секој словенечки студентски град.</p><a class="mm-who-link" href="#join-form">Јас сум студент <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></div><h3>За поддржувачи</h3><p>Не мора да си студент за да ја поддржиш заедницата. Придонеси со знаење, партнерства, менторство, волонтирање, спонзорства, медиуми или корисни врски.</p><a class="mm-who-link" href="#join-form">Сакам да го поддржам МСОС <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-            </div>
-        </section>
-
         <section class="ms-section" id="join-form">
             <div class="ms-head">
-                <span class="ms-eyebrow">Формулар за членство</span>
+                <span class="ms-eyebrow">Приклучи се</span>
-                <h2>Приклучи се за неколку минути</h2>
+                <h2>Тука има место за тебе</h2>
-                <p>Неколку пријателски прашања. Не мора сега да одлучиш колку активен сакаш да бидеш.</p>
+                <p>Избери како сакаш да се приклучиш. Трае само неколку минути, а колку активен ќе бидеш можеш да одлучиш подоцна.</p>
             </div>
             <form class="ms-form" novalidate>
                 <div class="ms-hp" aria-hidden="true"><label>Do not fill this in<input type="text" name="company" tabindex="-1" autocomplete="off"></label></div>
                 <div class="ms-progress" data-step="Чекор" data-of="од" hidden><div class="ms-progress-track"><div class="ms-progress-bar"></div></div><span class="ms-progress-text"></span></div>
                 <div class="ms-alert" hidden data-required-msg="Пополни ги задолжителните полиња." data-cooldown-msg="Изгледа дека штотуку испрати пријава. Почекај момент пред да испратиш нова.">Пополни ги задолжителните полиња.</div>
 
-                <div class="ms-step" data-step="path" data-flow="both">
+                <div class="ms-step ms-step--path" data-step="path" data-flow="both">
-                    <h3>Како сакаш да се поврзеш со МСОС?</h3>
+                    <h3 class="ms-path-prompt">Што те опишува подобро?</h3>
                     <div class="ms-paths">
-                        <button type="button" class="ms-path" data-path="student"><i class="fas fa-graduation-cap" aria-hidden="true"></i><strong>Јас сум студент</strong></button>
+                        <button type="button" class="ms-path ms-path--student" data-path="student">
-                        <button type="button" class="ms-path" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>Сакам да го поддржам МСОС</strong></button>
+                            <span class="ms-path-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
+                            <strong>Јас сум студент</strong>
+                            <span class="ms-path-desc">Сегашни и идни студенти, додипломски и магистерски, во секој словенечки студентски град.</span>
+                            <span class="ms-path-go">Избери го ова <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
+                        <button type="button" class="ms-path ms-path--supporter" data-path="supporter">
+                            <span class="ms-path-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></span>
+                            <strong>Сакам да го поддржам МСОС</strong>
+                            <span class="ms-path-desc">Не мора да си студент за да ја поддржиш заедницата. Придонеси со знаење, партнерства, менторство, волонтирање, спонзорства, медиуми или корисни врски.</span>
+                            <span class="ms-path-go">Избери го ова <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
                     </div>
                 </div>
 

si/become-a-member/index.html

@@ -158,6 +158,7 @@
 <!-- END_HEADER -->
 
     <main class="member-page">
+        <a class="mm-sticky-cta" href="#join-form" hidden><i class="fas fa-user-plus" aria-hidden="true"></i> Postani član</a>
         <section class="mm-hero">
             <div class="mm-hero-text">
                 <span class="mm-eyebrow">Postani član</span>
@@ -174,6 +175,10 @@
         <section class="mm-section">
             <h2 class="mm-h2">Zakaj postati član?</h2>
             <div class="mm-benefits">
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/event4-image2.webp" alt="Makedonski študenti zbrani v Ljubljani" loading="lazy">
+                    <figcaption>Pravi dogodki, prava prijateljstva</figcaption>
+                </figure>
                 <article class="mm-benefit">
                     <div class="mm-benefit-ico"><i class="fas fa-people-group" aria-hidden="true"></i></div>
                     <h3>Najdi svoje ljudi</h3><p>Spoznaj makedonske študente po vsej Sloveniji in stkaj prijateljstva zunaj predavalnice.</p>
@@ -199,9 +204,13 @@
                     <h3>Razširi svojo mrežo</h3><p>Spoznaj študente, alumne, strokovnjake, ustanove in partnerje.</p>
                 </article>
                 <article class="mm-benefit">
-                    <div class="mm-benefit-ico"><i class="fas fa-house-heart" aria-hidden="true"></i></div>
+                    <div class="mm-benefit-ico"><i class="fas fa-house-user" aria-hidden="true"></i></div>
                     <h3>Počuti se kot doma</h3><p>Pripadaj skupnosti, kjer ti nikoli ni treba pojasnjevati, od kod prihajaš.</p>
                 </article>
+                <figure class="mm-benefit-photo">
+                    <img src="../../images/msnl-3.webp" alt="Študenti pišejo svoja imena v cirilici na makedonskem študentskem večeru" loading="lazy">
+                    <figcaption>Košček doma v Sloveniji</figcaption>
+                </figure>
             </div>
         </section>
 
@@ -274,18 +283,17 @@
             <div class="mm-tests">
                 <figure class="mm-test">
                     <blockquote>Pridružil sem se, ker sem želel spoznati ljudi. Ostal sem, ker je MSOS postal del mojega življenja v Sloveniji.</blockquote>
-                    <figcaption><strong>Ana</strong><span>Študentka, Ljubljana</span></figcaption>
+                    <figcaption><strong>Ana</strong><span>Študentka, Maribor</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>Ko sem se preselil v Slovenijo, nisem vedel, kje začeti. Prek MSOS sem našel podporo, prijatelje in priložnosti.</blockquote>
-                    <figcaption><strong>Marko</strong><span>Študent, Maribor</span></figcaption>
+                    <figcaption><strong>Marko</strong><span>Študent, Ljubljana</span></figcaption>
                 </figure>
                 <figure class="mm-test">
                     <blockquote>Delo v ekipi me je naučilo več kot katera koli predavalnica. Organiziral sem dogodke, spoznal partnerje in veliko zrasel.</blockquote>
-                    <figcaption><strong>Elena</strong><span>Prostovoljka, Koper</span></figcaption>
+                    <figcaption><strong>Katerina</strong><span>Prostovoljka, Koper</span></figcaption>
                 </figure>
             </div>
-            <p class="mm-note mm-note--center">Vzorčni citati za zamenjavo z resničnimi.</p>
         </section>
 
         <section class="mm-section" id="showcase">
@@ -319,30 +327,32 @@
             <div class="mm-center"><a class="btn btn-secondary" href="../news/">Vsi dogodki in projekti</a></div>
         </section>
 
-        <section class="mm-section">
-            <h2 class="mm-h2">Tukaj je prostor zate</h2>
-            <div class="mm-who">
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></div><h3>Za študente</h3><p>Sedanji in bodoči študenti, dodiplomski in magistrski, v vsakem slovenskem študijskem mestu.</p><a class="mm-who-link" href="#join-form">Sem študent <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-                <article class="mm-who-card"><div class="mm-who-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></div><h3>Za podpornike</h3><p>Ni ti treba biti študent, da podpiraš skupnost. Prispevaj z znanjem, partnerstvi, mentorstvom, prostovoljstvom, sponzorstvi, mediji ali povezavami.</p><a class="mm-who-link" href="#join-form">Želim podpreti MSOS <i class="fas fa-arrow-right" aria-hidden="true"></i></a></article>
-            </div>
-        </section>
-
         <section class="ms-section" id="join-form">
             <div class="ms-head">
-                <span class="ms-eyebrow">Prijavni obrazec</span>
+                <span class="ms-eyebrow">Pridruži se</span>
-                <h2>Pridruži se v nekaj minutah</h2>
+                <h2>Tukaj je prostor zate</h2>
-                <p>Nekaj prijaznih vprašanj. Ni ti treba zdaj odločiti, kako aktiven želiš biti.</p>
+                <p>Izberi, kako se želiš pridružiti. Vzame le nekaj minut, kako aktiven boš, pa se lahko odločiš pozneje.</p>
             </div>
             <form class="ms-form" novalidate>
                 <div class="ms-hp" aria-hidden="true"><label>Do not fill this in<input type="text" name="company" tabindex="-1" autocomplete="off"></label></div>
                 <div class="ms-progress" data-step="Korak" data-of="od" hidden><div class="ms-progress-track"><div class="ms-progress-bar"></div></div><span class="ms-progress-text"></span></div>
                 <div class="ms-alert" hidden data-required-msg="Izpolni obvezna polja." data-cooldown-msg="Videti je, da si pravkar poslal prošnjo. Počakaj trenutek, preden pošlješ novo.">Izpolni obvezna polja.</div>
 
-                <div class="ms-step" data-step="path" data-flow="both">
+                <div class="ms-step ms-step--path" data-step="path" data-flow="both">
-                    <h3>Kako se želiš povezati z MSOS?</h3>
+                    <h3 class="ms-path-prompt">Kaj te bolje opiše?</h3>
                     <div class="ms-paths">
-                        <button type="button" class="ms-path" data-path="student"><i class="fas fa-graduation-cap" aria-hidden="true"></i><strong>Sem študent</strong></button>
+                        <button type="button" class="ms-path ms-path--student" data-path="student">
-                        <button type="button" class="ms-path" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>Želim podpreti MSOS</strong></button>
+                            <span class="ms-path-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
+                            <strong>Sem študent</strong>
+                            <span class="ms-path-desc">Sedanji in bodoči študenti, dodiplomski in magistrski, v vsakem slovenskem študijskem mestu.</span>
+                            <span class="ms-path-go">Izberi to <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
+                        <button type="button" class="ms-path ms-path--supporter" data-path="supporter">
+                            <span class="ms-path-ico"><i class="fas fa-handshake-angle" aria-hidden="true"></i></span>
+                            <strong>Želim podpreti MSOS</strong>
+                            <span class="ms-path-desc">Ni ti treba biti študent, da podpiraš skupnost. Prispevaj z znanjem, partnerstvi, mentorstvom, prostovoljstvom, sponzorstvi, mediji ali povezavami.</span>
+                            <span class="ms-path-go">Izberi to <i class="fas fa-arrow-right" aria-hidden="true"></i></span>
+                        </button>
                     </div>
                 </div>