Update content page background

app/blog/[slug]/page.js

@@ -201,6 +201,16 @@ export default async function BlogPostPage({ params }) {
     ],
   };
 
+  // Get article-specific background color from frontmatter
+  const getBackgroundColor = (post) => {
+    if (post.frontmatter?.background?.color) {
+      return post.frontmatter.background.color;
+    }
+    return "#1F2937"; // Default fallback (dark gray)
+  };
+
+  const backgroundColor = getBackgroundColor(post);
+
   return (
     <>
       {/* Structured Data */}
@@ -217,7 +227,10 @@ export default async function BlogPostPage({ params }) {
         }}
       />
 
-      <div className="min-h-screen bg-[#F4F3F1] relative overflow-hidden">
+      <div
+        className="min-h-screen relative overflow-hidden"
+        style={{ backgroundColor }}
+      >
         {/* Content Banner */}
         <ContentBanner post={post} />
 

app/components/ContentBanner.js

@@ -4,13 +4,24 @@ import { getAssetPath } from "../../lib/assetUtils";
 import ContentContainer from "./ContentContainer";
 
 export default function ContentBanner({ post }) {
+  // Get article-specific background image
+  const getBackgroundImage = (post) => {
+    if (post.frontmatter?.thumbnail?.horizontal) {
+      return `/content/blog/${post.frontmatter.thumbnail.horizontal}`;
+    }
+    // Fallback to default image
+    return getAssetPath("assets/Content_Banner.svg");
+  };
+
+  const backgroundImage = getBackgroundImage(post);
+
   return (
     <div className="pt-[var(--measures-spacing-016)] md:pt-[var(--measures-spacing-008)] lg:pt-[50px] xl:pt-[112px] h-[275px] sm:h-[326px] md:h-[224px] lg:h-[358.4px] xl:h-[504px] relative w-full sm:overflow-hidden">
       {/* Background SVG - Default to sm breakpoint */}
       <div
         className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[320/225.5]"
         style={{
-          backgroundImage: `url(${getAssetPath("assets/Content_Banner.svg")})`,
+          backgroundImage: `url(${backgroundImage})`,
           backgroundPosition: "center bottom",
         }}
       />
@@ -19,9 +30,7 @@ export default function ContentBanner({ post }) {
       <div
         className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[640/224] md:block hidden"
         style={{
-          backgroundImage: `url(${getAssetPath(
-            "assets/Content_Banner_2.svg",
-          )})`,
+          backgroundImage: `url(${backgroundImage})`,
           backgroundPosition: "center bottom",
         }}
       />

app/components/ContentThumbnailTemplate.js

@@ -72,14 +72,14 @@ const ContentThumbnailTemplate = ({
       href={`/blog/${post.slug}`}
       className={`block transition-transform duration-200 hover:scale-[1.02] ${className}`}
     >
-      <div className="relative min-w-[320px] h-[225.5px] overflow-hidden pt-[13.75px] pr-[76px] pb-[73.75px] pl-[14px]">
+      <div className="relative min-w-[320px] max-w-[800px] 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-full h-[225.5px] object-cover object-bottom"
+            className="w-full h-[225.5px] object-cover"
           />
           {/* Gradient overlay */}
           <div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-black/70 z-10" />

content/blog/building-community-trust.md

@@ -12,6 +12,8 @@ related:
 thumbnail:
   vertical: "building-community-trust-vertical.svg"
   horizontal: "building-community-trust-horizontal.svg"
+background:
+  color: "#EDCC8F"
 ---
 
 Trust is the foundation of any successful community organization. Without it, even the best structures and processes will struggle to function effectively. Building and maintaining trust requires intentional effort, clear communication, and consistent follow-through on commitments.

content/blog/operational-security-mutual-aid.md

@@ -7,6 +7,8 @@ related: ["resolving-active-conflicts", "making-decisions-without-hierarchy"]
 thumbnail:
   vertical: "operational-security-mutual-aid-vertical.svg"
   horizontal: "operational-security-mutual-aid-horizontal.svg"
+background:
+  color: "#F4F3F1"
 ---
 
 Mutual aid organizations face unique security challenges. Unlike traditional nonprofits, they often operate in politically sensitive environments and may be targets of surveillance, infiltration, or repression. This guide provides practical strategies for protecting your organization and its members.

content/blog/resolving-active-conflicts.md

@@ -8,6 +8,8 @@ related:
 thumbnail:
   vertical: "resolving-active-conflicts-vertical.svg"
   horizontal: "resolving-active-conflicts-horizontal.svg"
+background:
+  color: "#E2EFFF"
 ---
 
 Many groups strive to work without bosses, managers, or traditional leadership structures. But when no one's in charge, how do decisions get made? Non-hierarchical groups often rely on collective processes that prioritize trust, transparency, and shared responsibility. These approaches can take more time upfront, but they help build stronger, more equitable communities in the long run.

lib/validation.js

@@ -54,6 +54,17 @@ export const BLOG_POST_SCHEMA = {
       },
     },
   },
+  background: {
+    type: "object",
+    required: false,
+    default: null,
+    properties: {
+      color: {
+        type: "string",
+        required: false,
+      },
+    },
+  },
 };
 
 /**
@@ -149,8 +160,11 @@ export function sanitizeBlogPost(frontmatter) {
 
   for (const [field, config] of Object.entries(BLOG_POST_SCHEMA)) {
     if (frontmatter[field] !== undefined) {
-      // Special handling for thumbnail object
-      if (field === "thumbnail" && typeof frontmatter[field] === "object") {
+      // Special handling for thumbnail and background objects
+      if (
+        (field === "thumbnail" || field === "background") &&
+        typeof frontmatter[field] === "object"
+      ) {
         sanitized[field] = frontmatter[field];
       } else {
         sanitized[field] = frontmatter[field];