Social

website/app-templates/smarty/blocks/go_social.tpl

@@ -0,0 +1,22 @@
+<div class="alert alert-info" role="alert">
+  <div class="panel-heading"><h4>{t}Join the GeoKrety community{/t}</h4></div>
+
+  <div class="panel-body text-center">
+    <div class="text-primary">
+      {fa icon="rocket" size="3x"}
+    </div>
+    <p class="lead">{t}We are now sharing updates, tips, and release news across the Fediverse.{/t}</p>
+  </div>
+
+  <div class="panel-body text-center">
+    <a class="btn btn-primary btn-block" rel="me noopener" href="{GK_SITE_FEDIVERSE_URL}" target="_blank"
+       style="white-space: normal; line-height: 1.4;">
+      {fa icon="bullhorn"}
+      {t}@GeoKrety on social.opencaching.earth{/t}
+    </a>
+  </div>
+
+  <div class="panel-body small text-muted text-center">
+    {t}Follow us from any Mastodon or Fediverse client and never miss an adventure!{/t}
+  </div>
+</div>

website/app-templates/smarty/footer.tpl

@@ -23,9 +23,30 @@
         {t escape=no url={'hall_of_fame'|alias}}Designed with <abbr title="love">💗</abbr> by <a id="footer-team" href="%1">The GeoKrety Team</a>{/t}
     </p>
     <ul class="social_footer_ul text-center">
-        <li><a id="footer-facebook" href="https://www.facebook.com/groups/1624761011150615/about/">{fa icon="facebook"}</a></li>
-        <li><a id="footer-twitter" href="https://twitter.com/geokrety">{fa icon="twitter"}</a></li>
-        <li><a id="footer-instagram" href="https://www.instagram.com/explore/tags/geokrety/">{fa icon="instagram"}</a></li>
+        <li>
+            <a id="footer-facebook" href="https://www.facebook.com/groups/1624761011150615/about/" target="_blank" rel="noopener" title="{t}Join the GeoKrety community on Facebook{/t}">
+                {fa icon="facebook"}
+                <span class="sr-only">{t}Facebook{/t}</span>
+            </a>
+        </li>
+        <li>
+            <a id="footer-twitter" href="https://twitter.com/geokrety" target="_blank" rel="noopener" title="{t}Follow GeoKrety on X (Twitter){/t}">
+                {fa icon="twitter"}
+                <span class="sr-only">{t}X (Twitter){/t}</span>
+            </a>
+        </li>
+        <li>
+            <a id="footer-instagram" href="https://www.instagram.com/explore/tags/geokrety/" target="_blank" rel="noopener" title="{t}Explore GeoKrety on Instagram{/t}">
+                {fa icon="instagram"}
+                <span class="sr-only">{t}Instagram{/t}</span>
+            </a>
+        </li>
+        <li>
+            <a id="footer-fediverse" href="{GK_SITE_FEDIVERSE_URL}" rel="me noopener" target="_blank" title="{t}Join us on the Fediverse{/t}">
+                {fa icon="rss"}
+                <span class="sr-only">{t}Fediverse{/t}</span>
+            </a>
+        </li>
     </ul>
     <small class="pull-right">
         {include file='elements/version.tpl'}

website/app-templates/smarty/help-pages/en/help.html

@@ -172,16 +172,43 @@ <h3><i class="fa fa-shield"></i> Legal & Security</h3>
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 
-            <!-- Need More Help -->
-            <div class="text-center" style="margin: 40px 0;">
-                <a href="#morehelp" class="btn btn-lg btn-warning">
-                    <i class="fa fa-question-circle"></i>
-                    <strong>Need more help?</strong>
-                </a>
+    <div class="row">
+        <div class="col-md-12">
+            <!-- Community & Support -->
+            <div class="help-section">
+                <h3><i class="fa fa-users"></i> Community & Support</h3>
+                <div class="row">
+                    <div class="col-md-3">
+                        <div class="help-item">
+                            <a href="#social">
+                                <i class="fa fa-bullhorn"></i>
+                                Follow GeoKrety
+                            </a>
+                        </div>
+                    </div>
+                    <div class="col-md-3">
+                        <div class="help-item">
+                            <a href="#morehelp">
+                                <i class="fa fa-question-circle"></i>
+                                Need more help?
+                            </a>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
+
+    <!-- Need More Help -->
+    <div class="text-center" style="margin: 40px 0;">
+        <a href="#morehelp" class="btn btn-lg btn-warning">
+            <i class="fa fa-question-circle"></i>
+            <strong>Need more help?</strong>
+        </a>
+    </div>
 </div>
 
 <div class="panel panel-default">
@@ -1132,6 +1159,20 @@ <h3>How to decode?</h3>
     </div>
 </div>
 
+<div class="panel panel-default">
+    <div class="panel-heading">
+        <a class="anchor" id="social"></a>
+        Connect with GeoKrety
+    </div>
+    <div class="panel-body">
+        <p>
+            Keep in touch with the GeoKrety community by following
+            <a href="https://social.opencaching.earth/@geokrety">@GeoKrety on social.opencaching.earth</a>.
+            Any Fediverse user can subscribe for news, release notes, and events straight from their favourite client.
+        </p>
+    </div>
+</div>
+
 <div class="panel panel-default">
     <div class="panel-heading">
         <a class="anchor" id="morehelp"></a>

website/app-templates/smarty/navbar-left.tpl

@@ -60,6 +60,15 @@
             <li><a id="navbar-resolver" href="/go2geo/">{fa icon="map-pin"} {t}Waypoint resolver{/t}</a></li>
         </ul>
     </li>
+
+    <li>
+        <a id="navbar-fediverse-rss" href="{GK_SITE_FEDIVERSE_URL}/feed.rss" target="_blank" rel="noopener"
+           title="{t}Subscribe to GeoKrety Fediverse RSS{/t}">
+            <i class="fa fa-rss" style="color:#f26522;"></i>
+            <span class="sr-only">{t}Subscribe to GeoKrety Fediverse RSS{/t}</span>
+        </a>
+    </li>
+
     {if GK_DEVEL}
         <li>
             <div class="navbar-btn">

website/app-templates/smarty/pages/home.tpl

@@ -47,8 +47,9 @@
     {/if}
   </div>
   <div class="col-md-3">
-    {include file='banners/donate.tpl'}
+    {include file='blocks/donate.tpl'}
     {include file='blocks/found_geokret.tpl'}
+    {include file='blocks/go_social.tpl'}
   </div>
 </div>
 

website/app/GeoKrety/Service/Config.php

@@ -18,6 +18,7 @@ public function __construct() {
         // SITE CONFIG
         define('HOSTNAME', getenv('HOSTNAME') ?: 'localhost');
         define('GK_SITE_BASE_SERVER_URL', getenv('GK_SITE_BASE_SERVER_URL') ?: 'https://geokrety.org');
+        define('GK_SITE_FEDIVERSE_URL', getenv('GK_SITE_FEDIVERSE_URL') ?: 'https://social.opencaching.earth/@geokrety');
         define('GK_SITE_BASE_SERVER_FQDN', getenv('GK_SITE_BASE_SERVER_FQDN') ?: 'geokrety.org');
         define('GK_SITE_ADMINISTRATORS', explode(',', getenv('GK_SITE_ADMINISTRATORS') ?: '26422'));
         define('GK_SITE_SESSION_REMEMBER', getenv('GK_SITE_SESSION_REMEMBER') ?: 60 * 60 * 24); // 24 hours

website/public/app-ui/css/footer.scss

@@ -25,28 +25,38 @@ body > {
 }
 
 .social_footer_ul {
-  display: table;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 24px;
   margin: 15px auto 0;
   padding: 0;
   list-style-type: none;
 }
 
 .social_footer_ul li {
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 10px;
-  float: left;
+  display: flex;
+  align-items: center;
 }
 
 .social_footer_ul li a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
   color: #23527c;
   border: 1px solid #23527c;
-  padding: 8px;
   border-radius: 50%;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.social_footer_ul li a:hover,
+.social_footer_ul li a:focus {
+  background-color: rgba(35, 82, 124, 0.1);
+  color: #23527c;
 }
 
 .social_footer_ul li i {
-  width: 20px;
-  height: 20px;
-  text-align: center;
+  font-size: 18px;
 }