Homepage refresh, activities redesign + newsletter rollout

Navigation
- Replace "Donate" with a "Support MSOS ❤️" CTA site-wide
- Remove dead nav links (Gallery, Press releases)
- Turn the one-item News dropdown into a direct link

Homepage
- Replace the non-functional "Become part" contact form with a
  "Find your people in Slovenia" join CTA (blue/white gradient band,
  orange button, photo collage), in all three languages
- Fix the placeholder Activities subtitle
- Redesign Activities into card-style tabs with icons; move per-tab
  content into HTML panels and switch by index so the tabs work in
  every language (MK/SI tabs were previously dead)

Newsletter (MailerLite)
- Add the subscribe block to the News hub, news articles, and every
  events/projects page and hub, in all three languages
- Resize/rebalance the block, shrink the privacy line, add top spacing
- Standardise on honest copy (drop the "2,000+ subscribers" claim)
- Load main.js on the News hub pages (they shipped without it, so the
  form and header dropdowns didn't work there)
- Fix a dead privacy-policy link on the makedonska-vecer page
- Document the signup convention in docs/newsletter-signup.md

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed 2026-08-01 19:51:59 +02:00
1 parent f492a8a547
commit 9e8cbc5876
199 files changed
+1765 -3971

No files matched your search

+53 -72
View File
@@ -42,7 +42,6 @@
<ul class="dropdown-menu">
<li><a href="../en/projects/">Events & Projects</a></li>
<li><a href="../en/blog/">Blog</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</li>
@@ -55,18 +54,12 @@
<li><a href="../en/get-to-know-macedonia/">Get to know Macedonia</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">News</a>
<ul class="dropdown-menu">
<li><a href="../en/news/">News and Announcements</a></li>
<li><a href="#">Press releases</a></li>
</ul>
</li>
<li class="menu-item"><a href="../en/news/">News</a></li>
</ul>
</nav>
<div class="navigation-actions">
<a href="../en/become-a-member/" class="btn btn-secondary">Become a member</a>
<button class="btn btn-primary">Donate</button>
<button class="btn btn-primary">Support MSOS ❤️</button>
<div class="language-selector">
<div class="current-lang">
<i class="fas fa-globe"></i>
@@ -106,7 +99,6 @@
<ul class="dropdown-menu">
<li><a href="../en/projects/">Events & Projects</a></li>
<li><a href="../en/blog/">Blog</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</li>
@@ -119,18 +111,12 @@
<li><a href="../en/get-to-know-macedonia/">Get to know Macedonia</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">News</a>
<ul class="dropdown-menu">
<li><a href="../en/news/">News and Announcements</a></li>
<li><a href="#">Press releases</a></li>
</ul>
</li>
<li class="menu-item"><a href="../en/news/">News</a></li>
</ul>
</nav>
<div class="navigation-actions">
<a href="../en/become-a-member/" class="btn btn-secondary">Become a member</a>
<button class="btn btn-primary">Donate</button>
<button class="btn btn-primary">Support MSOS ❤️</button>
<div class="language-selector">
<button class="current-lang" id="mobile-lang-trigger">
<i class="fas fa-globe"></i>
@@ -226,22 +212,47 @@
<section class="activities-section">
<div class="activities-header">
<span class="activities-eyebrow">What we do</span>
<h2>Activities</h2>
<p>Our philosophy is simple, hire a team of diverse, passionate people and foster a culture that empowers you to do you best work.</p>
<p>From your first application to graduation, we’re by your side — support, friendships, culture, and a voice that speaks up for Macedonian students in Slovenia.</p>
</div>
<div class="activities-content">
<div class="activities-nav">
<ul>
<li class="active">Student Support</li>
<li>Fun & Social Life</li>
<li>Education & Culture</li>
<li>Student Representation</li>
</ul>
<a href="../en/become-a-member/" class="btn btn-primary-orange">Become a member</a>
<div class="activities-nav" role="tablist" aria-label="Activities">
<button type="button" class="activity-tab active" role="tab" aria-selected="true" data-panel="0">
<span class="activity-tab-ico"><i class="fas fa-hand-holding-heart" aria-hidden="true"></i></span>
<span class="activity-tab-label">Student Support</span>
</button>
<button type="button" class="activity-tab" role="tab" aria-selected="false" data-panel="1">
<span class="activity-tab-ico"><i class="fas fa-people-group" aria-hidden="true"></i></span>
<span class="activity-tab-label">Fun &amp; Social Life</span>
</button>
<button type="button" class="activity-tab" role="tab" aria-selected="false" data-panel="2">
<span class="activity-tab-ico"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
<span class="activity-tab-label">Education &amp; Culture</span>
</button>
<button type="button" class="activity-tab" role="tab" aria-selected="false" data-panel="3">
<span class="activity-tab-ico"><i class="fas fa-bullhorn" aria-hidden="true"></i></span>
<span class="activity-tab-label">Student Representation</span>
</button>
<a href="../en/become-a-member/" class="btn btn-primary-orange activities-cta">Become a member</a>
</div>
<div class="activity-details">
<div class="activities-panels">
<div class="activity-panel active" role="tabpanel" data-panel="0">
<p>We know moving to a new country can feel overwhelming, so we’re here to make it easier. From helping you with university applications to finding your way around student life in Slovenia, you can always count on us. We offer free consultations, answer your questions on Instagram and Facebook (yes, even late at night), and host events where you can meet others and hear real experiences first-hand. With mentorship, info sessions, and a friendly community by your side, you’ll never have to go through the journey alone.</p>
<img src="../images/img1-08.09.2025.webp" alt="Students receiving support and guidance">
<div class="activity-panel-media"><img src="../images/img1-08.09.2025.webp" alt="Students receiving support and guidance" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="1" hidden>
<p>Student life is so much more than lectures and exams — it’s about the moments in between. At MSOS, we create those moments: from parties, concerts, and casual hangouts, to cinema nights, excursions, and team-building trips. We also host talks and events where you can share ideas, meet new people, and feel part of something bigger. Whether you’re connecting with Macedonian students or making friends with Slovenians and internationals, our activities are all about building a community where you can relax, have fun, and create memories that last long after university.</p>
<div class="activity-panel-media"><img src="../images/img2-08.09.2025.webp" alt="Students socialising and having fun at an event" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="2" hidden>
<p>Studying abroad isn’t only about lectures and exams — it’s also about growing as a person. That’s why we mix learning with culture. We run study groups and small workshops where you can share knowledge and pick up new skills. At the same time, we keep our traditions alive with cultural evenings, music, food, and gatherings that remind us of home. It’s a balance: support for your studies, and a space to stay connected to who we are.</p>
<div class="activity-panel-media"><img src="../images/img3-08.09.2025.webp" alt="An educational workshop and cultural gathering" loading="lazy"></div>
</div>
<div class="activity-panel" role="tabpanel" data-panel="3" hidden>
<p>Studying abroad comes with challenges, and sometimes students need a voice that’s heard. At MSOS, we take that role seriously. We organise meetings with government representatives, ministries, embassies, universities, and other key institutions to make sure the interests of Macedonian students in Slovenia are on the table. From campus issues to academic policies and integration, we work to solve problems, push for positive changes, and create a better experience for all of us.</p>
<div class="activity-panel-media"><img src="../images/img4-08.09.2025.webp" alt="MSOS members representing students at a formal meeting" loading="lazy"></div>
</div>
</div>
</div>
</section>
@@ -343,50 +354,20 @@
</div>
</section>
<section class="become-part-section">
<div class="become-part-header">
<h2>Become part of our amazing team</h2>
<p>We're a 100% remote team spread all across the world. Join us!</p>
<section class="join-cta">
<div class="join-cta-text">
<span class="join-cta-eyebrow">Become a member</span>
<h2>Find your people in Slovenia</h2>
<p class="join-cta-lead">Meet people, join events, get support, create projects and become part of the Macedonian student community across Slovenia.</p>
<div class="join-cta-actions">
<a class="btn btn-primary-orange" href="../en/become-a-member/">Become a member</a>
<a class="btn btn-secondary" href="../en/projects/">See what we do</a>
</div>
</div>
<img src="../images/9-becomepart.webp" alt="Our amazing team in a classroom setting" class="team-photo">
<div class="contact-form-container">
<form class="contact-form">
<div class="form-row">
<div class="form-group">
<label for="first-name">First name</label>
<input type="text" id="first-name" placeholder="First name">
</div>
<div class="form-group">
<label for="last-name">Last name</label>
<input type="text" id="last-name" placeholder="Last name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="student@email.com">
</div>
<div class="form-group">
<label for="phone-number">Phone number</label>
<div class="phone-input">
<select id="country-code" aria-label="Country code">
<option>US</option>
<option>SI</option>
<option>MK</option>
</select>
<input type="tel" id="phone-number" placeholder="+1 (555) 000-0000">
</div>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="5"></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="privacy-policy">
<label for="privacy-policy">You agree to our friendly <a href="../en/privacy-policy/">privacy policy</a>.</label>
</div>
<button type="submit" class="btn btn-primary">Send message</button>
</form>
<div class="join-cta-collage">
<div class="join-cta-photo join-cta-photo--1"><img src="../images/event4-img-1.webp" alt="Meet Student Slovenia 2024" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--2"><img src="../images/msnl-1.webp" alt="Macedonian Student Night in Ljubljana" loading="lazy"></div>
<div class="join-cta-photo join-cta-photo--3"><img src="../images/handball-2025-1.png" alt="Cheering for Macedonia, watching handball together in Slovenia" loading="lazy"></div>
</div>
</section>