From eadfe561b88730b923118d96115930651aab607d Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:44:05 -0600
Subject: [PATCH] Learn page content thumbnails at default breakpoint

---
 app/components/ContentThumbnailTemplate.js |  4 +--
 app/learn/page.js                          | 40 +++++-----------------
 2 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/app/components/ContentThumbnailTemplate.js b/app/components/ContentThumbnailTemplate.js
index fbed8c1..3f7aa9f 100644
--- a/app/components/ContentThumbnailTemplate.js
+++ b/app/components/ContentThumbnailTemplate.js
@@ -76,14 +76,14 @@ const ContentThumbnailTemplate = ({
       href={`/blog/${post.slug}`}
       className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
     >
-      <div className="relative w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
+      <div className="relative min-w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
         {/* Background SVG - sized to fit the 320x225.5 container exactly */}
         <div className="absolute inset-0 z-0">
           {/* eslint-disable-next-line @next/next/no-img-element */}
           <img
             src={backgroundImage}
             alt={`Background for ${post.frontmatter.title}`}
-            className="w-[320px] h-[225.5px] object-cover"
+            className="w-full h-[225.5px] object-cover object-bottom"
           />
           {/* Gradient overlay */}
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />
diff --git a/app/learn/page.js b/app/learn/page.js
index 6bbb71c..800a198 100644
--- a/app/learn/page.js
+++ b/app/learn/page.js
@@ -22,37 +22,15 @@ export default function LearnPage() {
         />
       </div>
 
-      <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"
-                  slugOrder={slugOrder}
-                />
-              ))}
-            </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 className="space-y-4">
+        {allPosts.slice(0, 3).map((post, index) => (
+          <ContentThumbnailTemplate
+            key={post.slug}
+            post={post}
+            variant="horizontal"
+            slugOrder={slugOrder}
+          />
+        ))}
       </div>
     </div>
   );