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:
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> 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>
|
||||
<h2>Pridruži se v nekaj minutah</h2>
|
||||
<p>Nekaj prijaznih vprašanj. Ni ti treba zdaj odločiti, kako aktiven želiš biti.</p>
|
||||
<span class="ms-eyebrow">Pridruži se</span>
|
||||
<h2>Tukaj je prostor zate</h2>
|
||||
<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">
|
||||
<h3>Kako se želiš povezati z MSOS?</h3>
|
||||
<div class="ms-step ms-step--path" data-step="path" data-flow="both">
|
||||
<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" data-path="supporter"><i class="fas fa-handshake-angle" aria-hidden="true"></i><strong>Želim podpreti MSOS</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>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>
|
||||
|
||||
|
||||
Reference in new issue
Block a user