Update content documentation and implement basic learn page

app/components/ContentThumbnailTemplate.js

@@ -13,9 +13,10 @@ const ContentThumbnailTemplate = ({
   post,
   className = "",
   variant = "vertical", // Internal prop for testing/development
+  slugOrder = [], // Array of slugs for consistent icon cycling
 }) => {
   // Post-specific background selection - different SVG for each post
-  const getBackgroundImage = (slug, variant) => {
+  const getBackgroundImage = (slug, variant, slugOrder) => {
     const verticalImages = [
       getAssetPath(ASSETS.VERTICAL_1),
       getAssetPath(ASSETS.VERTICAL_2),
@@ -28,23 +29,20 @@ const ContentThumbnailTemplate = ({
       getAssetPath(ASSETS.HORIZONTAL_3),
     ];
 
-    const images = variant === "vertical" ? verticalImages : horizontalImages;
+    if (!slug)
+      return variant === "vertical" ? verticalImages[0] : horizontalImages[0];
 
-    if (!slug) return images[0];
-
-    // Simple cycling approach to ensure different styles
-    const slugOrder = [
-      "building-community-trust",
-      "operational-security-mutual-aid",
-      "making-decisions-without-hierarchy",
-      "resolving-active-conflicts",
-    ];
+    // Use the passed slugOrder for consistent cycling through background variants
     const index = slugOrder.indexOf(slug);
-    const finalIndex = index >= 0 ? index % images.length : 0;
-    return images[finalIndex];
+    const backgroundIndex = index >= 0 ? index % 3 : 0; // Cycle through 3 background variants
+
+    // Return the same background index for both vertical and horizontal variants
+    return variant === "vertical"
+      ? verticalImages[backgroundIndex]
+      : horizontalImages[backgroundIndex];
   };
 
-  const backgroundImage = getBackgroundImage(post.slug, variant);
+  const backgroundImage = getBackgroundImage(post.slug, variant, slugOrder);
 
   if (variant === "vertical") {
     return (

app/components/Header.js

@@ -9,7 +9,7 @@ import { getAssetPath, ASSETS } from "../../lib/assetUtils";
 // Configuration data for testing
 export const navigationItems = [
   { href: "#", text: "Use cases", extraPadding: true },
-  { href: "#", text: "Learn" },
+  { href: "/learn", text: "Learn" },
   { href: "#", text: "About" },
 ];
 

app/components/HomeHeader.js

@@ -29,7 +29,7 @@ export default function HomeHeader() {
 
   const navigationItems = [
     { href: "#", text: "Use cases", extraPadding: true },
-    { href: "#", text: "Learn" },
+    { href: "/learn", text: "Learn" },
     { href: "#", text: "About" },
   ];
 
@@ -79,10 +79,10 @@ export default function HomeHeader() {
             ? size === "home" || size === "homeMd"
               ? "homeMd"
               : size === "large"
-                ? "large"
-                : size === "homeXlarge"
-                  ? "homeXlarge"
-                  : "xsmallUseCases"
+              ? "large"
+              : size === "homeXlarge"
+              ? "homeXlarge"
+              : "xsmallUseCases"
             : size
         }
         variant={

app/components/RelatedArticles.js

@@ -3,10 +3,14 @@
 import { useState, useEffect } from "react";
 import ContentThumbnailTemplate from "./ContentThumbnailTemplate";
 
-export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
+export default function RelatedArticles({
+  relatedPosts,
+  currentPostSlug,
+  slugOrder = [],
+}) {
   // Filter out the current post from related posts
   const filteredPosts = relatedPosts.filter(
-    (post) => post.slug !== currentPostSlug,
+    (post) => post.slug !== currentPostSlug
   );
 
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -93,7 +97,7 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
                     const handleMouseUp = () => {
                       document.removeEventListener(
                         "mousemove",
-                        handleMouseMove,
+                        handleMouseMove
                       );
                       document.removeEventListener("mouseup", handleMouseUp);
                     };
@@ -112,6 +116,7 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
                 <ContentThumbnailTemplate
                   post={relatedPost}
                   variant="vertical"
+                  slugOrder={slugOrder}
                 />
               </div>
             ))}
@@ -133,8 +138,8 @@ export default function RelatedArticles({ relatedPosts, currentPostSlug }) {
                       index === currentIndex
                         ? `${progress}%`
                         : index < currentIndex
-                          ? "100%"
-                          : "0%",
+                        ? "100%"
+                        : "0%",
                   }}
                 />
               </div>