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" />

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-4">
-        <div className="space-y-12">
+        {allPosts.slice(0, 3).map((post, index) => (
-          {/* More Articles */}
+          <ContentThumbnailTemplate
-          <section>
+            key={post.slug}
-            <h2 className="text-2xl font-semibold text-[var(--color-content-inverse-primary)] mb-6">
+            post={post}
-              More Articles
+            variant="horizontal"
-            </h2>
+            slugOrder={slugOrder}
-            <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>
     </div>
   );