Adding Info Page for Community Channels

_includes/footer.html

@@ -54,7 +54,7 @@ <h4 class="footerHeaderStyle align-center-md"><b>Development</b></h4>
 			    <li class="footerListStyle"><a href="{{ site.baseurl }}/develop">Read about development</a></li>
                             <li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Mailing_Lists">Join mailing list</a></li>
                             <li class="footerListStyle"><a href="https://help.sugarlabs.org/en/">Documentation</a></li>
-                            <li class="footerListStyle"><a href="https://matrix.to/#/#sugar:matrix.org">Chat with us on Matrix</a></li>
+                            <li class="footerListStyle"><a href="{{ site.baseurl }}/chat-with-us-on-matrix">Join the Community</a></li>
                             <li class="footerListStyle"><a href="https://wiki.sugarlabs.org/go/Development_Team/Source_Code">Development code</a></li>
                             <li class="footerListStyle"><a href="https://translate.sugarlabs.org">Translation Platform</a></li>
                             <li class="footerListStyle"><a href="https://wiki.sugarlabs.org/">Sugar Labs Wiki</a></li>

chat-with-us-on-matrix.html

@@ -0,0 +1,94 @@
+---
+layout: default
+title: Music Blocks - Sugar Labs
+permalink: /chat-with-us-on-matrix/index.html
+---
+<!-- Title section -->
+<div class="section-title1" >
+    <span class="tag tag-regular">Join the Community</span>
+</div>
+
+<!-- Matrix Elements -->
+<section id="testimonial" class="zeroMarPadBtm">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" >
+                <div class="row justify-content-center">
+                    <div class="col-md-8 col-md-push-2" > 
+                        <div class="section-title text-center">
+                            <h2>SUGARLABS ON MATRIX ELEMENTS</h2>
+                            <br>
+                            <p class="customParagraphStyle">Element is a secure messaging and collaboration application built on the Matrix protocol, an open standard for decentralized communication. It offers end-to-end encryption, ensuring that conversations remain private and secure. Element supports features such as group chats, file sharing, voice and video calls, and integrates with various other communication platforms through bridging. It's available as a web application and has desktop versions for Windows, macOS, and Linux, as well as mobile apps for Android and iOS.</p>
+                            <br><a class="join-mat" href="https://matrix.to/#/#sugar:matrix.org" target="_blank">Join us on Matrix</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+<!-- Discord -->
+<section id="testimonial" class="zeroMarPadBtm">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" >
+                <div class="row justify-content-center">
+                    <div class="col-md-8 col-md-push-2" > 
+                        <div class="section-title text-center">
+                            <h2>SUGARLABS ON DISCORD</h2>
+                            <br>
+                            <p class="customParagraphStyle">Discord is a popular communication platform that combines the features of chat lobbies, message boards, and VoIP chat systems. It allows users to create and join servers—dedicated spaces for communities or groups—where they can participate in text channels, voice calls, video calls, and share media and files. While Discord provides various privacy settings and safety features, concerns have been raised about data collection and user privacy. The platform collects user data, including messages and IP logs, which are retained for up to two years.</p>
+                            <br><a class="join-mat" href="https://discord.com/channels/1078051575580336249/1078051576284975226" target="_blank">Join us on Discord</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- Slideshow -->
+<section id="intro" class="zeroMarPadBtm">
+    <div class="container" >
+        <div class="row">
+            <div class="col-md-12" >
+                <div class="row justify-content-center">
+                    <div class="col-md-8 col-md-push-2">
+                        <div class="testimonial-carousel">
+                            <div id="testimonial-slider1" class="owl-carousel">
+                                <div>
+                                    <img src="{{ site.baseurl }}/assets/chat1.png" alt="Sugarlabs Community Channel" class="customImageStyle">    
+                                </div>
+                                <div>
+                                    <img src="{{ site.baseurl }}/assets/chat2.png" alt="Sugarlabs Community Channel" class="customImageStyle">
+                                </div>
+                                <div>
+                                    <img src="{{ site.baseurl }}/assets/chat3.png" alt="Sugarlabs Community Channel" class="customImageStyle">
+                                </div>
+                                <div>
+                                    <img src="{{ site.baseurl }}/assets/chat4.png" alt="Sugarlabs Community Channel" class="customImageStyle">
+                                </div>
+                                <div>
+                                    <img src="{{ site.baseurl }}/assets/chat5.png" alt="Sugarlabs Community Channel" class="customImageStyle">
+                                </div>
+
+                            </div>
+                        </div>
+                    </div> 
+                    <br><p style="text-align: center;">Sugarlabs Community channel on <a href ="https://matrix.to/#/#sugar:matrix.org">Matrix Elements</a> and <a href ="https://discord.com/channels/1078051575580336249/1078051576284975226">Discord</a>.</p>       
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- "Return to main page" -->
+<section id="call-to-action">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12" >
+                <a href="{{ site.baseurl }}/" ><button type="button" class="btn bt-raised btn-custom bt lastButtonMargin" >Return to main page</button></a>
+            </div>
+        </div>
+    </div>
+</section>

css/airspace.css

@@ -2778,6 +2778,28 @@ font-size:30px;
   top:0.1em;
   color: #fff !important;
 }  
+.join-mat {
+  display:inline-block;
+  padding:0.7em 1.4em;
+  margin:0 0.3em 0.3em 0;
+  border-radius:0.15em;
+  box-sizing: border-box;
+  text-decoration:none;
+  font-family:'Roboto',sans-serif;
+  text-transform:uppercase;
+  font-weight:400;
+  color:#FFFFFF !important;
+  background-color:#00a40e;
+  box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
+  text-align:center;
+  position:relative;
+  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+  font-size: 1.5em;
+}
+.join-mat:active {
+  top:0.1em;
+  color: #fff !important;
+}  
 table, th, td {
   border: 1px solid black;
   border-collapse: collapse;

js/custom.js

@@ -17,54 +17,48 @@ function toggleAnswer(answerId, element) {
 // Counter Animation of the home page 
 document.addEventListener('DOMContentLoaded', () => {
     const counters = document.querySelectorAll('.count');
-
     // Function to animate the counter
     function animateCounter(counter) {
         const target = +counter.getAttribute('data-target');
-        const speed = 200;
+        const speed = 200; 
 
         const updateCount = () => {
-            const current = +counter.innerText;
-            const increment = target / speed;
+            const current = +counter.innerText.replace(/,/g, '');
+            const increment = Math.ceil(target / speed);
 
             if (current < target) {
-                counter.innerText = Math.ceil(current + increment);
-                setTimeout(updateCount, 10); // Repeat every 10ms
+                counter.innerText = Math.min(current + increment, target).toLocaleString();
+                setTimeout(updateCount, 10);
+            } else if (target === 170) {
+                counter.innerText = target.toLocaleString();
             } else {
-
-                if (target === 170) {
-                    counter.innerText = `${target}`;
-                } else {
-                    counter.innerText = `${target}+`;
-                }
-
+                counter.innerText = target.toLocaleString() + '+';
             }
         };
 
         updateCount();
     }
 
-    // Use IntersectionObserver to detect when the element comes into view
     const observerOptions = {
-        root: null,
-        threshold: 0.3
+        root: null, 
+        threshold: 0.3 
     };
 
     const observer = new IntersectionObserver((entries, observer) => {
         entries.forEach(entry => {
             if (entry.isIntersecting) {
-                animateCounter(entry.target); // Start animation
-                observer.unobserve(entry.target); // Stop observing after animation starts
+                animateCounter(entry.target); 
+                observer.unobserve(entry.target);
             }
         });
     }, observerOptions);
 
     counters.forEach(counter => {
-        observer.observe(counter); // Observe each counter
+        observer.observe(counter);
     });
-
 });
 
+
 //Donation Banner 
 // Ensures that the buttons have loaded correctly before executing code
 document.addEventListener('DOMContentLoaded', () => {