Adjust content image upload pipeline

app/components/ContentThumbnailTemplate.js

@@ -13,36 +13,32 @@ 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, slugOrder) => {
-    const verticalImages = [
-      getAssetPath(ASSETS.VERTICAL_1),
-      getAssetPath(ASSETS.VERTICAL_2),
-      getAssetPath(ASSETS.VERTICAL_3),
-    ];
+  // Get article-specific background image from frontmatter
+  const getBackgroundImage = (post, variant) => {
+    // Check if post has thumbnail images defined in frontmatter
+    if (post.frontmatter?.thumbnail) {
+      const imageName =
+        variant === "vertical"
+          ? post.frontmatter.thumbnail.vertical
+          : post.frontmatter.thumbnail.horizontal;
 
-    const horizontalImages = [
-      getAssetPath(ASSETS.HORIZONTAL_1),
-      getAssetPath(ASSETS.HORIZONTAL_2),
-      getAssetPath(ASSETS.HORIZONTAL_3),
-    ];
+      if (imageName) {
+        // Return path to image in content/blog directory
+        return `/content/blog/${imageName}`;
+      }
+    }
 
-    if (!slug)
-      return variant === "vertical" ? verticalImages[0] : horizontalImages[0];
+    // Fallback to default images if no thumbnail specified
+    const fallbackImages = {
+      vertical: getAssetPath(ASSETS.VERTICAL_1),
+      horizontal: getAssetPath(ASSETS.HORIZONTAL_1),
+    };
 
-    // Use the passed slugOrder for consistent cycling through background variants
-    const index = slugOrder.indexOf(slug);
-    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];
+    return fallbackImages[variant] || fallbackImages.vertical;
   };
 
-  const backgroundImage = getBackgroundImage(post.slug, variant, slugOrder);
+  const backgroundImage = getBackgroundImage(post, variant);
 
   if (variant === "vertical") {
     return (

app/learn/page.js

@@ -7,9 +7,6 @@ export default function LearnPage() {
   const allPosts = getAllBlogPosts();
   const recentPosts = getRecentBlogPosts(3);
 
-  // Create slug order for consistent background cycling
-  const slugOrder = allPosts.map((post) => post.slug);
-
   return (
     <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
       {/* Content Lockup Header */}
@@ -22,15 +19,36 @@ export default function LearnPage() {
         />
       </div>
 
-      <div className="space-y-4">
-        {allPosts.slice(0, 3).map((post, index) => (
-          <ContentThumbnailTemplate
-            key={post.slug}
-            post={post}
-            variant="horizontal"
-            slugOrder={slugOrder}
-          />
-        ))}
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="space-y-12">
+          {/* More Articles */}
+          <section>
+            <h2 className="text-2xl font-semibold text-[var(--color-content-inverse-primary)] mb-6">
+              More Articles
+            </h2>
+            <div className="space-y-4">
+              {allPosts.slice(0, 3).map((post, index) => (
+                <ContentThumbnailTemplate
+                  key={post.slug}
+                  post={post}
+                  variant="horizontal"
+                />
+              ))}
+            </div>
+          </section>
+
+          {/* Coming Soon */}
+          <section className="bg-[var(--color-surface-default-secondary)] p-6 rounded-lg shadow">
+            <h2 className="text-xl font-semibold text-[var(--color-content-inverse-primary)] mb-4">
+              More Content Coming Soon
+            </h2>
+            <p className="text-[var(--color-content-inverse-secondary)]">
+              We&apos;re working on adding more educational content to help you
+              build better communities. Check back soon for new articles and
+              resources.
+            </p>
+          </section>
+        </div>
       </div>
     </div>
   );