Feature/tracking (#8)

* Add tracking + CTA butons

* A few fixes.

Author: aalhour

_data/strings_ar.yml

@@ -348,6 +348,7 @@ start_here_page:
       - title: "خيوط أسئلة وأجوبة دورية"
         description: "أسئلة وأجوبة غير متزامنة (Async) من خبراء في المجتمع."
     next_up: "الجلسة القادمة: يُعلن عنها في مجموعة الإعلانات."
+    cta_text: "اطّلع على إيقاع البازار"
 
   # Rules summary
   rules_summary:
@@ -400,7 +401,7 @@ cadence_page:
       - title: "📱 بازار السبت"
         description: "جلسة كتابية خفيفة يوم السبت عبر المجموعات: شارك ما تبنيه/تتعلمه، اطرح أسئلة، وشارك في النقاش."
         how: "أفضل طريقة للمشاركة: تحديث قصير (سطران–ثلاثة) + سؤال واحد واضح."
-      - title: "🔥 جلسات فايرسايد الشهرية"
+      - title: "🎙️ جلسات فايرسايد الشهرية"
         description: "جلسة يقودها ضيف (أو حلقة نقاش) حول موضوع واحد مع أسئلة وأجوبة مباشرة. نعلن الشكل والموعد مسبقًا."
         how: "أفضل طريقة للمشاركة: اقرأ تمهيد الجلسة، جهّز سؤالًا واحدًا جيدًا، ثم تابع بعد الجلسة."
       - title: "🤔 خيوط الأسئلة والأجوبة الدورية"

_data/strings_en.yml

@@ -49,7 +49,7 @@ about:
       description: "Topic-based WhatsApp groups where people swap practical experience: engineering, product, design & growth, leadership, jobs, startups, expats, and more. Think of it as a souq of overlapping lanes — you join what matters and ignore the rest."
     - label: "Cadence"
       title: "Rituals and sessions that bring people back"
-      description: "We don’t rely on hope-based interaction. We run recurring rhythms like Bazaar Saturdays, plus monthly firesides/panels and periodic Q&A threads — so the network compounds over time instead of fading."
+      description: "We don't rely on hope-based interaction. We run recurring rhythms like Bazaar Saturdays, plus monthly firesides/panels and periodic Q&A threads — so the network compounds over time instead of fading."
     - label: "Projects & Mentorship"
       title: "From talk → warm intros → shipped work"
       description: "When trust forms, things happen: feedback loops, mentorship, collaborations, and community-born projects like Meshkah. Mentorship is structured (time-boxed office hours / clear asks), and projects are opt-in — no vague promises, just proof-of-work."
@@ -317,6 +317,7 @@ start_here_page:
       - title: "Periodic Q&A threads"
         description: "Async \"ask me anything\" from community experts."
     next_up: "Next Fireside: announced in the Announcements group."
+    cta_text: "See how the Bazaar works"
 
   # Rules summary
   rules_summary:
@@ -369,7 +370,7 @@ cadence_page:
       - title: "📱 Bazaar Saturdays"
         description: "A casual text-based Saturday session across the groups: share what you're building/learning, ask questions, and join the conversation."
         how: "Best way to join: post a 2–3 line update + one clear question."
-      - title: "🔥 Monthly Firesides"
+      - title: "🎙️ Monthly Firesides"
         description: "A guest-led session (or panel) on one topic, with live Q&A. Format + time are announced in advance."
         how: "Best way to join: read the prompt, bring one thoughtful question, and follow up after."
       - title: "🤔 Periodic Q&A threads"

_includes/footer.html

@@ -17,7 +17,7 @@
       <a href="/{{ lang }}/" data-i18n="nav_home" data-ar="{{ strings_ar.nav.home }}" data-en="{{ strings_en.nav.home }}">{{ strings.nav.home }}</a>
       <a href="/{{ lang }}/start-here/" data-i18n="footer_start_here" data-ar="{{ strings_ar.nav.start_here }}" data-en="{{ strings_en.nav.start_here }}">{{ strings.nav.start_here }}</a>
       <a href="/{{ lang }}/cadence/" data-i18n="footer_cadence" data-ar="{{ strings_ar.nav.cadence }}" data-en="{{ strings_en.nav.cadence }}">{{ strings.nav.cadence }}</a>
-      <a href="/{{ lang }}/rules/" data-i18n="footer_rules" data-ar="{{ strings_ar.footer.links.rules }}" data-en="{{ strings_en.footer.links.rules | default: 'Community rules' }}">{{ strings.footer.links.rules | default: strings.nav.rules }}</a>
+      <a href="/{{ lang }}/rules/" data-i18n="nav_rules" data-ar="{{ strings_ar.nav.rules }}" data-en="{{ strings_en.nav.rules }}">{{ strings.nav.rules }}</a>
       {% comment %}
       <a href="/{{ lang }}/articles/" data-i18n="footer_articles" data-ar="{{ strings_ar.footer.links.articles }}" data-en="{{ strings_en.footer.links.articles | default: 'Articles & field notes' }}">{{ strings.footer.links.articles | default: strings.nav.articles }}</a>
       <a href="/{{ lang }}/archive/" data-i18n="footer_archive" data-ar="{{ strings_ar.footer.links.archive }}" data-en="{{ strings_en.footer.links.archive | default: 'Archive' }}">{{ strings.footer.links.archive | default: strings.nav.archive }}</a>

_layouts/default.html

@@ -81,6 +81,9 @@
   <link rel="icon" type="image/svg+xml" href="{{ '/assets/img/favicon.svg' | relative_url }}">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ '/assets/img/favicon-32.png' | relative_url }}">
   <link rel="apple-touch-icon" sizes="180x180" href="{{ '/assets/img/apple-touch-icon.png' | relative_url }}">
+
+  <!-- OneDollarStats -->
+  <script defer src="https://assets.onedollarstats.com/stonks.js"></script>
 </head>
 <body class="lang-{{ lang }}">
   {% include header.html %}

_layouts/rules.html

@@ -59,7 +59,7 @@ <h1 class="hero-title">{{ strings.rules_page.title }}</h1>
       <div class="rule-title">{{ rule.title }}</div>
     </div>
     <div class="rule-body">
-      {{ rule.body | newline_to_br }}
+      {{ rule.body | markdownify }}
       {%- if rule.list -%}
       <ul class="rule-list-inner">
         {%- for item in rule.list -%}

_layouts/start-here.html

@@ -129,6 +129,7 @@ <h2>{{ strings.start_here_page.cadence.heading }}</h2>
     {%- endfor -%}
   </ul>
   <p class="next-up">{{ strings.start_here_page.cadence.next_up }}</p>
+  <a href="/{{ lang }}/cadence/" class="cadence-cta">{{ strings.start_here_page.cadence.cta_text }} {{ strings.arrow_right }}</a>
 </div>
 
 <!-- 7) Rules in 20 Seconds -->
@@ -139,9 +140,7 @@ <h2>{{ strings.start_here_page.rules_summary.heading }}</h2>
     <li>{{ item }}</li>
     {%- endfor -%}
   </ul>
-  <a class="btn btn-teal" href="/{{ lang }}/rules/">
-    {{ strings.start_here_page.rules_summary.button }} <span aria-hidden="true">{{ strings.arrow_external }}</span>
-  </a>
+  <a class="cadence-cta" href="/{{ lang }}/rules/">{{ strings.start_here_page.rules_summary.button }} {{ strings.arrow_right }}</a>
 </div>
 
 <!-- 8) Privacy Notice -->

assets/css/styles.scss

@@ -303,13 +303,16 @@ a:hover {
   align-items: center;
   justify-content: space-between;
   gap: 16px;
+  flex-wrap: nowrap; /* Keep logo and hamburger on same line */
 }
 
 .nav-left {
   display: flex;
   align-items: center;
   gap: 10px;
-  min-width: 0; /* Allow shrinking for text wrap */
+  min-width: 0; /* Allow shrinking */
+  flex: 1 1 auto; /* Grow and shrink as needed */
+  overflow: hidden; /* Clip overflowing text */
 }
 
 /* Logo */
@@ -528,18 +531,19 @@ a:hover {
 @media (max-width: 768px) {
   .nav-inner {
     padding-inline: 14px;
-    flex-wrap: wrap; /* Allow nav-right to wrap below on mobile */
   }
 
   .nav-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0; /* Never shrink the hamburger */
   }
 
   .site-tagline {
-    word-wrap: break-word;
-    overflow-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .nav-right {
@@ -1121,6 +1125,21 @@ a:hover {
   margin: 0;
 }
 
+.feature-card-cta {
+  display: inline-block;
+  margin-top: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--teal);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.feature-card-cta:hover {
+  color: var(--terracotta);
+  text-decoration: underline;
+}
+
 /* --------------------------------------------------------------------------
    10. CHIPS / TAGS
    --------------------------------------------------------------------------
@@ -1724,10 +1743,10 @@ ul.clean li::before {
 }
 
 .dek {
-  font-size: 15px;
+  font-size: 16px;
   color: var(--text-muted);
-  margin: 0 0 12px;
-  line-height: 1.5;
+  margin: 0 0 14px;
+  line-height: 1.55;
 }
 
 .meta-note {
@@ -1740,8 +1759,9 @@ ul.clean li::before {
   border-radius: var(--radius-md);
   border: 1px solid var(--border);
   background: rgba(21, 32, 41, 0.06);
-  padding: 12px 14px;
-  font-size: 15px;
+  padding: 14px 16px;
+  font-size: 16px;
+  line-height: 1.6;
   color: var(--text);
   margin-bottom: 24px;
 }
@@ -1788,16 +1808,16 @@ ul.clean li::before {
 }
 
 .rule-title {
-  font-size: 17px;
+  font-size: 18px;
   font-weight: 650;
   color: var(--text-heading);
 }
 
 .rule-body {
-  font-size: 14px;
+  font-size: 16px;
   color: var(--text);
-  margin: 4px 0 0;
-  line-height: 1.6;
+  margin: 6px 0 0;
+  line-height: 1.65;
 }
 
 .rule-body p {
@@ -2462,6 +2482,21 @@ code:not(pre code) {
   font-style: italic;
 }
 
+.cadence-cta {
+  display: inline-block;
+  margin-top: 14px;
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: var(--teal);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.cadence-cta:hover {
+  color: var(--terracotta);
+  text-decoration: underline;
+}
+
 /* Rules Summary - Quick rules with CTA */
 .rules-summary {
   background: rgba(179, 78, 54, 0.06);