fix: complete mobile carousel and social updates

static/img/social-facebook.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 12.0301C24 5.38947 18.624 0 12 0C5.376 0 0 5.38947 0 12.0301C0 17.8526 4.128 22.7008 9.6 23.8195V15.6391H7.2V12.0301H9.6V9.02256C9.6 6.70075 11.484 4.81203 13.8 4.81203H16.8V8.42105H14.4C13.74 8.42105 13.2 8.96241 13.2 9.62406V12.0301H16.8V15.6391H13.2V24C19.26 23.3985 24 18.2737 24 12.0301Z" fill="white"/>
+</svg>

static/img/social-linkedin.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM9.0625 16.9738H6.6325V9.15375H9.0625V16.9738ZM7.8325 8.19375C7.065 8.19375 6.56875 7.65 6.56875 6.9775C6.56875 6.29125 7.08 5.76375 7.86375 5.76375C8.6475 5.76375 9.1275 6.29125 9.1425 6.9775C9.1425 7.65 8.6475 8.19375 7.8325 8.19375ZM17.9375 16.9738H15.5075V12.64C15.5075 11.6313 15.155 10.9462 14.2763 10.9462C13.605 10.9462 13.2063 11.41 13.03 11.8563C12.965 12.015 12.9488 12.24 12.9488 12.4638V16.9725H10.5175V11.6475C10.5175 10.6713 10.4862 9.855 10.4537 9.1525H12.565L12.6763 10.2388H12.725C13.045 9.72875 13.8288 8.97625 15.14 8.97625C16.7388 8.97625 17.9375 10.0475 17.9375 12.35V16.9738Z" fill="white"/>
+</svg>

static/img/social-youtube.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0037 11.7913L11.1963 10.4813C10.9513 10.3675 10.75 10.495 10.75 10.7662V13.2338C10.75 13.505 10.9513 13.6325 11.1963 13.5188L14.0025 12.2087C14.2488 12.0938 14.2487 11.9063 14.0037 11.7913ZM12 0C5.3725 0 0 5.3725 0 12C0 18.6275 5.3725 24 12 24C18.6275 24 24 18.6275 24 12C24 5.3725 18.6275 0 12 0ZM12 16.875C5.8575 16.875 5.75 16.3213 5.75 12C5.75 7.67875 5.8575 7.125 12 7.125C18.1425 7.125 18.25 7.67875 18.25 12C18.25 16.3213 18.1425 16.875 12 16.875Z" fill="white"/>
+</svg>

static/js/modules/RecentPostsCarousel.js

@@ -0,0 +1,48 @@
+const mobileViewport = window.matchMedia("(max-width: 640px)");
+
+const initializeCarousel = (carousel) => {
+    const cards = Array.from(carousel.querySelectorAll(".recent-posts__card"));
+    const dots = Array.from(carousel.querySelectorAll(".recent-posts__dot"));
+    const previous = carousel.querySelector(".recent-posts__control--previous");
+    const next = carousel.querySelector(".recent-posts__control--next");
+
+    if (cards.length < 2 || !previous || !next) {
+        return;
+    }
+
+    let activeIndex = 0;
+
+    const render = () => {
+        cards.forEach((card, index) => {
+            const isActive = index === activeIndex;
+            card.classList.toggle("is-active", isActive);
+            card.hidden = mobileViewport.matches && !isActive;
+        });
+
+        dots.forEach((dot, index) => {
+            const isActive = index === activeIndex;
+            dot.classList.toggle("is-active", isActive);
+            dot.toggleAttribute("aria-current", isActive);
+        });
+    };
+
+    const showArticle = (index) => {
+        activeIndex = (index + cards.length) % cards.length;
+        render();
+    };
+
+    previous.addEventListener("click", () => showArticle(activeIndex - 1));
+    next.addEventListener("click", () => showArticle(activeIndex + 1));
+    dots.forEach((dot, index) =>
+        dot.addEventListener("click", () => showArticle(index)),
+    );
+    mobileViewport.addEventListener("change", render);
+
+    render();
+};
+
+const initRecentPostsCarousels = () => {
+    document.querySelectorAll(".recent-posts").forEach(initializeCarousel);
+};
+
+export default initRecentPostsCarousels;

static/js/theme.js

@@ -7,6 +7,7 @@ import { registerBackToTopButton } from './components/backToTop.js';
 import GetHeaderHeight from './modules/GetHeaderHeight.js';
 import tagExternalLinks from './modules/TagExternalLinks.js';
 import Navigation from './modules/Navigation.js';
+import initRecentPostsCarousels from './modules/RecentPostsCarousel.js';
 
 // Add passive event listeners
 ! function (e) {
@@ -68,6 +69,9 @@ document.addEventListener('DOMContentLoaded', () => {
     // Initialize Header Height
     GetHeaderHeight();
 
+    // Initialize mobile Recent Insights carousels.
+    initRecentPostsCarousels();
+
     // Add Back to Top button to body
     // const backToTop = document.createElement('x-back-to-top');
     // document.body.appendChild(backToTop);