feat(event,support): refine event page + add supporter form to Support page
Event page (Meet Student Slovenia 2026): - Guide-style centred header with wide banner hero and caption - Key facts on a plain background: When/Where side by side, subtle live-stream line, centred Register CTA, full-width note - Partner logos (NLB patron, Embassy support) + sponsor Kapital Aset Menadžment DOOEL / Капитал асет менаџмент ДООЕЛ - Inline photos between sections; em-dash removed from the subtitle - "Support MSOS" call-out linking to the support page Support page: - Added the become-a-member supporter flow (supporter path only) via a new data-only-flow="supporter" mode in member-form.js; submits to the same combined Google Form tagged type=supporter - Hero "Become a partner" button now scrolls to the form - .ms-section carries its own brand vars so the form renders off the member page Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed
1 parent
270df5b2f8
commit
954dfb4d7d
12 files changed
+564
-17
No files matched your search
+165
-1
@@ -195,7 +195,7 @@
|
||||
<h1>We couldn’t have done this alone</h1>
|
||||
<p class="sup-lead">MSOS began as a handful of volunteers with an idea, and grew into a community that supports Macedonian students across Slovenia. Every event, every guide, every helping hand exists because partners, sponsors and people like you believed in it.</p>
|
||||
<div class="sup-hero-cta">
|
||||
<a href="mailto:info@msosorg.com?subject=Partnership%20with%20MSOS" class="btn btn-primary">Become a partner</a>
|
||||
<a href="#join-form" class="btn btn-primary">Become a partner</a>
|
||||
<a href="#donate" class="btn btn-secondary">Make a donation</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -252,6 +252,169 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Become a partner / supporter form (same flow as Become a member, supporter path only) -->
|
||||
<section class="ms-section" id="join-form">
|
||||
<div class="ms-head">
|
||||
<span class="ms-eyebrow">Join us</span>
|
||||
<h2>There is a place for you here</h2>
|
||||
<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" data-only-flow="supporter" 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 ms-step--path" data-step="path" data-flow="both">
|
||||
<h3 class="ms-path-prompt">Which one sounds like you?</h3>
|
||||
<div class="ms-paths">
|
||||
<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>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>
|
||||
|
||||
<div class="ms-step" data-step="s-basic" data-flow="student">
|
||||
<h3>Tell us who you are</h3>
|
||||
<div class="ms-grid"><label class="ms-field"><span>First name *</span><input type="text" data-name="firstName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Last name *</span><input type="text" data-name="lastName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Email *</span><input type="email" data-name="email" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Phone (optional)</span><input type="tel" data-name="phone" autocomplete="off"></label><label class="ms-field"><span>Current city</span><input type="text" data-name="cityNow" autocomplete="off"></label><label class="ms-field"><span>Preferred contact</span><select data-name="contactPref"><option value="">Select...</option><option value="email">Email</option><option value="whatsapp">WhatsApp</option><option value="phone">Phone</option></select></label></div>
|
||||
</div>
|
||||
<div class="ms-step" data-step="s-status" data-flow="student">
|
||||
<h3>Where are you in your student journey?</h3>
|
||||
<div class="ms-radios" data-name="status" data-required="1">
|
||||
<button type="button" class="ms-radio" data-value="studying">I already study in Slovenia</button>
|
||||
<button type="button" class="ms-radio" data-value="moving">I am preparing to move to Slovenia</button>
|
||||
<button type="button" class="ms-radio" data-value="exploring">I am still exploring my options</button>
|
||||
<button type="button" class="ms-radio" data-value="graduated">I recently graduated</button>
|
||||
</div>
|
||||
<div class="ms-cond" data-when="studying">
|
||||
<div class="ms-grid"><label class="ms-field"><span>University</span><input type="text" data-name="university" autocomplete="off"></label><label class="ms-field"><span>Faculty</span><input type="text" data-name="faculty" autocomplete="off"></label><label class="ms-field"><span>Study programme</span><input type="text" data-name="programme" autocomplete="off"></label><label class="ms-field"><span>Study level</span><select data-name="level"><option value="">Select...</option><option value="bachelor">Bachelor</option><option value="master">Master</option></select></label><label class="ms-field"><span>Year of study</span><input type="text" data-name="year" autocomplete="off"></label><label class="ms-field"><span>City of study</span><select data-name="studyCity"><option value="">Select...</option><option value="ljubljana">Ljubljana</option><option value="maribor">Maribor</option><option value="koper">Koper and Primorska</option><option value="nova-gorica">Nova Gorica and Gorizia</option><option value="celje">Celje</option><option value="other">Other</option><option value="unsure">I am not sure yet</option></select></label></div>
|
||||
</div>
|
||||
<div class="ms-cond" data-when="moving">
|
||||
<div class="ms-grid"><label class="ms-field"><span>University</span><input type="text" data-name="university" autocomplete="off"></label><label class="ms-field"><span>Faculty or field of interest</span><input type="text" data-name="field" autocomplete="off"></label><label class="ms-field"><span>Study level</span><select data-name="level"><option value="">Select...</option><option value="bachelor">Bachelor</option><option value="master">Master</option></select></label><label class="ms-field"><span>Intended city</span><select data-name="intendedCity"><option value="">Select...</option><option value="ljubljana">Ljubljana</option><option value="maribor">Maribor</option><option value="koper">Koper and Primorska</option><option value="nova-gorica">Nova Gorica and Gorizia</option><option value="celje">Celje</option><option value="other">Other</option><option value="unsure">I am not sure yet</option></select></label><label class="ms-field"><span>Expected academic year</span><input type="text" data-name="academicYear" autocomplete="off"></label></div>
|
||||
</div>
|
||||
<div class="ms-cond" data-when="exploring">
|
||||
<div class="ms-grid"><label class="ms-field"><span>Areas of interest</span><input type="text" data-name="areas" autocomplete="off"></label><label class="ms-field"><span>Study level</span><select data-name="level"><option value="">Select...</option><option value="bachelor">Bachelor</option><option value="master">Master</option></select></label></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-step" data-step="s-intention" data-flow="student">
|
||||
<h3>What sounds most like you?</h3>
|
||||
<p class="ms-hint">Choose as many as you like.</p>
|
||||
<div class="ms-multi" data-name="intention">
|
||||
<button type="button" class="ms-chip" data-value="meet">I want to meet people</button>
|
||||
<button type="button" class="ms-chip" data-value="events">I want to join events</button>
|
||||
<button type="button" class="ms-chip" data-value="informed">I want to stay informed</button>
|
||||
<button type="button" class="ms-chip" data-value="support">I am looking for support</button>
|
||||
<button type="button" class="ms-chip" data-value="volunteer">I want to volunteer</button>
|
||||
<button type="button" class="ms-chip" data-value="organise">I want to help organise events</button>
|
||||
<button type="button" class="ms-chip" data-value="projects">I want to join projects</button>
|
||||
<button type="button" class="ms-chip" data-value="experience">I want to build experience</button>
|
||||
<button type="button" class="ms-chip" data-value="leadership">I am interested in leadership</button>
|
||||
<button type="button" class="ms-chip" data-value="figuring">I am still figuring it out</button>
|
||||
</div>
|
||||
<p class="ms-msg" data-when="leadership" hidden>We would love to learn about your experience and the kind of responsibility you are interested in.</p>
|
||||
<p class="ms-msg" data-when="events" hidden>Perfect. You can join the community without taking on any formal responsibility.</p>
|
||||
<p class="ms-msg" data-when="figuring" hidden>No pressure. Start by staying connected and decide later how involved you want to be.</p>
|
||||
</div>
|
||||
<div class="ms-step" data-step="s-interests" data-flow="student">
|
||||
<h3>What would you like to be part of?</h3>
|
||||
<p class="ms-hint">Choose as many as you like.</p>
|
||||
<div class="ms-multi" data-name="interests">
|
||||
<button type="button" class="ms-chip" data-value="social">Social events</button>
|
||||
<button type="button" class="ms-chip" data-value="cultural">Cultural events</button>
|
||||
<button type="button" class="ms-chip" data-value="sports">Sports</button>
|
||||
<button type="button" class="ms-chip" data-value="support">Student support</button>
|
||||
<button type="button" class="ms-chip" data-value="creative">Creative projects</button>
|
||||
<button type="button" class="ms-chip" data-value="humanitarian">Humanitarian activities</button>
|
||||
<button type="button" class="ms-chip" data-value="professional">Professional development</button>
|
||||
<button type="button" class="ms-chip" data-value="networking">Networking</button>
|
||||
<button type="button" class="ms-chip" data-value="media">Media and communication</button>
|
||||
<button type="button" class="ms-chip" data-value="design">Design and content</button>
|
||||
<button type="button" class="ms-chip" data-value="partnerships">Partnerships</button>
|
||||
<button type="button" class="ms-chip" data-value="volunteering">Volunteering</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-step" data-step="s-city" data-flow="student">
|
||||
<h3>Where should we connect you?</h3>
|
||||
<div class="ms-radios" data-name="connectCity">
|
||||
<button type="button" class="ms-radio" data-value="ljubljana">Ljubljana</button>
|
||||
<button type="button" class="ms-radio" data-value="maribor">Maribor</button>
|
||||
<button type="button" class="ms-radio" data-value="koper">Koper and Primorska</button>
|
||||
<button type="button" class="ms-radio" data-value="nova-gorica">Nova Gorica and Gorizia</button>
|
||||
<button type="button" class="ms-radio" data-value="celje">Celje</button>
|
||||
<button type="button" class="ms-radio" data-value="other">Other</button>
|
||||
<button type="button" class="ms-radio" data-value="unsure">I am not sure yet</button>
|
||||
</div>
|
||||
<p class="ms-msg" data-when="*any" hidden>We will connect you with the MSOS community closest to you.</p>
|
||||
</div>
|
||||
<div class="ms-step" data-step="s-personal" data-flow="student">
|
||||
<h3>What would make MSOS valuable to you? (optional)</h3>
|
||||
<textarea data-name="personal" rows="4" placeholder="Share anything you hope to find, learn or experience."></textarea>
|
||||
</div>
|
||||
<div class="ms-step" data-step="s-consent" data-flow="student">
|
||||
<label class="ms-check"><input type="checkbox" data-name="consentContact" data-required="1"> <span>I agree that MSOS may contact me about my request.</span></label>
|
||||
<label class="ms-check"><input type="checkbox" data-name="consentPrivacy" data-required="1"> <span>I have read the privacy notice. (<a href="../privacy-policy/">privacy notice</a>)</span></label>
|
||||
<label class="ms-check"><input type="checkbox" data-name="consentUpdates"> <span>I would like to receive event and community updates.</span></label>
|
||||
</div>
|
||||
|
||||
<div class="ms-step" data-step="p-basic" data-flow="supporter">
|
||||
<h3>Tell us who you are</h3>
|
||||
<div class="ms-grid"><label class="ms-field"><span>First name *</span><input type="text" data-name="firstName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Last name *</span><input type="text" data-name="lastName" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Email *</span><input type="email" data-name="email" data-required="1" autocomplete="off"></label><label class="ms-field"><span>Phone (optional)</span><input type="tel" data-name="phone" autocomplete="off"></label><label class="ms-field"><span>Current city</span><input type="text" data-name="cityNow" autocomplete="off"></label><label class="ms-field"><span>Organisation or company (optional)</span><input type="text" data-name="org" autocomplete="off"></label><label class="ms-field"><span>Role or profession (optional)</span><input type="text" data-name="role" autocomplete="off"></label></div>
|
||||
</div>
|
||||
<div class="ms-step" data-step="p-support" data-flow="supporter">
|
||||
<h3>How would you like to support MSOS?</h3>
|
||||
<p class="ms-hint">Choose as many as you like.</p>
|
||||
<div class="ms-multi" data-name="support">
|
||||
<button type="button" class="ms-chip" data-value="partnerships">Partnerships</button>
|
||||
<button type="button" class="ms-chip" data-value="sponsorships">Sponsorships</button>
|
||||
<button type="button" class="ms-chip" data-value="mentorship">Mentorship</button>
|
||||
<button type="button" class="ms-chip" data-value="volunteering">Volunteering</button>
|
||||
<button type="button" class="ms-chip" data-value="expertise">Professional expertise</button>
|
||||
<button type="button" class="ms-chip" data-value="media">Media support</button>
|
||||
<button type="button" class="ms-chip" data-value="events">Event support</button>
|
||||
<button type="button" class="ms-chip" data-value="careers">Career opportunities</button>
|
||||
<button type="button" class="ms-chip" data-value="connections">Community connections</button>
|
||||
<button type="button" class="ms-chip" data-value="venue">Venue or logistics</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-step" data-step="p-message" data-flow="supporter">
|
||||
<h3>Tell us how you would like to contribute (optional)</h3>
|
||||
<textarea data-name="contribution" rows="4" placeholder="A short note about what you can offer or a project you care about."></textarea>
|
||||
</div>
|
||||
<div class="ms-step" data-step="p-consent" data-flow="supporter">
|
||||
<label class="ms-check"><input type="checkbox" data-name="consentContact" data-required="1"> <span>I agree that MSOS may contact me about my request.</span></label>
|
||||
<label class="ms-check"><input type="checkbox" data-name="consentPrivacy" data-required="1"> <span>I have read the privacy notice. (<a href="../privacy-policy/">privacy notice</a>)</span></label>
|
||||
</div>
|
||||
|
||||
<div class="ms-nav">
|
||||
<button type="button" class="btn btn-secondary ms-back" hidden>Back</button>
|
||||
<button type="button" class="btn btn-primary-orange ms-next" hidden>Continue</button>
|
||||
<button type="button" class="btn btn-primary-orange ms-submit" data-student="Join MSOS" data-supporter="Support MSOS" hidden>Join MSOS</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="ms-success" hidden>
|
||||
<div class="ms-success-icon"><i class="fas fa-circle-check" aria-hidden="true"></i></div>
|
||||
<h3 class="ms-success-title"
|
||||
data-student-title="Welcome to the community" data-supporter-title="Thank you for supporting MSOS"></h3>
|
||||
<p class="ms-success-text"
|
||||
data-student-text="Thank you for reaching out. We are excited to get to know you. A member of the MSOS team will contact you soon." data-supporter-text="We appreciate your interest in the Macedonian student community in Slovenia. Our team will review your message and contact you soon."></p>
|
||||
<p class="ms-success-next">While you wait</p>
|
||||
<div class="ms-success-links">
|
||||
<a class="btn btn-secondary" href="../news/">Explore upcoming events</a>
|
||||
<a class="btn btn-secondary" href="../student-welcome-guide/">Read the Student Welcome Guide</a>
|
||||
<a class="btn btn-secondary" href="../projects/">Discover recent projects</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Where your support goes -->
|
||||
<section class="sup-section sup-section--tint">
|
||||
<div class="sup-inner">
|
||||
@@ -432,6 +595,7 @@
|
||||
<!-- END_FOOTER -->
|
||||
|
||||
<script src="../../main.js"></script>
|
||||
<script src="../../member-form.js"></script>
|
||||
<link rel="stylesheet" href="/assistant.css">
|
||||
<script src="/assistant.js" defer></script>
|
||||
</body>
|
||||
|
||||
Reference in new issue
Block a user