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