Become a Member: bento benefits, merged/redesigned join form, floating CTA, fixes
Why become a member - Rebuild the benefits grid as a 3x3 bento: 7 icon cards + 2 real event photos (with captions), fixes the orphan card, adds hover motion. Swap the blank fa-house-heart (Pro) for fa-house-user (Free) on "Feel at home". Join form - Merge the duplicate "There is a place for you here" section into the form's path step (student / supporter cards now carry the descriptions); drop the separate section. New heading "There is a place for you here"; centred layout. - Redesign the choice cards: colour-coded (student orange / supporter teal) icon circles, descriptions, hover lift + "Choose this" reveal. - Fix the stray "Support MSOS" submit button showing on the path step. Conversion + polish - Floating "Become a member" CTA that appears after the hero and hides near the form/final CTA, so the ask stays reachable without scrolling to the bottom. - More space between section titles and their cards (numbers, reals, tests, showcase, benefits). - Testimonials: Elena -> Katerina (Koper); un-swap Ana (Maribor) and Marko (Ljubljana); remove the "sample quotes" placeholder note. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed
1 parent
51474b2da5
commit
f492a8a547
5 files changed
+166
-82
No files matched your search
@@ -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>
|
||||
<h2>Приклучи се за неколку минути</h2>
|
||||
<p>Неколку пријателски прашања. Не мора сега да одлучиш колку активен сакаш да бидеш.</p>
|
||||
<span class="ms-eyebrow">Приклучи се</span>
|
||||
<h2>Тука има место за тебе</h2>
|
||||
<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">
|
||||
<h3>Како сакаш да се поврзеш со МСОС?</h3>
|
||||
<div class="ms-step ms-step--path" data-step="path" data-flow="both">
|
||||
<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" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>Сакам да го поддржам МСОС</strong></button>
|
||||
<button type="button" class="ms-path ms-path--student" data-path="student">
|
||||
<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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user