Content Banner default and sm breakpoint

app/blog/[slug]/page.js

@@ -2,6 +2,7 @@ import { notFound } from "next/navigation";
 import Link from "next/link";
 import { getBlogPostBySlug, getAllPosts } from "../../../lib/contentProcessor";
 import ContentThumbnailTemplate from "../../components/ContentThumbnailTemplate";
+import ContentBanner from "../../components/ContentBanner";
 
 /**
  * Generate static params for all blog posts
@@ -77,36 +78,11 @@ export default async function BlogPostPage({ params }) {
       className="min-h-screen"
       style={{ backgroundColor: "var(--color-content-default-primary)" }}
     >
+      {/* Content Banner */}
+      <ContentBanner post={post} />
+
       {/* Main Content */}
       <article className="max-w-4xl mx-auto px-4 py-8">
-        {/* Article Header */}
-        <header className="mb-8">
-          <div className="mb-4">
-            <Link
-              href="/"
-              className="inline-flex items-center text-blue-600 hover:text-blue-700 transition-colors"
-            >
-              ← Back to Blog
-            </Link>
-          </div>
-
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            {post.frontmatter.title}
-          </h1>
-
-          <div className="flex items-center gap-4 text-gray-600 mb-6">
-            <span className="font-medium">{post.frontmatter.author}</span>
-            <span>•</span>
-            <time dateTime={post.frontmatter.date}>
-              {new Date(post.frontmatter.date).toLocaleDateString("en-US", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })}
-            </time>
-          </div>
-        </header>
-
         {/* Article Content */}
         <div className="post-body max-w-none text-gray-800 leading-relaxed text-lg">
           <div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />

app/components/ContentBanner.js

@@ -0,0 +1,25 @@
+"use client";
+
+import { getAssetPath } from "../../lib/assetUtils";
+import ContentContainer from "./ContentContainer";
+
+export default function ContentBanner({ post }) {
+  return (
+    <div className="pt-[var(--measures-spacing-016)] h-[275px] sm:h-[326px] relative w-full sm:overflow-hidden">
+      {/* Background SVG */}
+      <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")})`,
+          backgroundPosition: "center bottom",
+        }}
+      />
+
+      {/* Content Container */}
+      <div className="relative z-10 h-full flex flex-col justify-center pl-[var(--measures-spacing-016)] pr-[96px]">
+        {/* ContentContainer with post data */}
+        <ContentContainer post={post} size="responsive" />
+      </div>
+    </div>
+  );
+}

app/components/ContentContainer.js

@@ -32,7 +32,12 @@ const ContentContainer = ({ post, width = "200px", size = "responsive" }) => {
       : "relative z-20 h-full flex flex-col gap-[var(--measures-spacing-012)] sm:gap-[var(--measures-spacing-016)] md:gap-[18px] lg:gap-[var(--measures-spacing-024)]";
 
   return (
-    <div className={containerClasses} style={{ width }}>
+    <div
+      className={`${containerClasses} ${
+        size === "responsive" ? "max-w-[298px] sm:max-w-[479px]" : ""
+      }`}
+      style={size === "responsive" ? {} : { width }}
+    >
       {/* Content Container - gap between icon and text */}
       <div
         className={

app/tailwind.css

@@ -10,6 +10,7 @@
   /* Custom breakpoints */
   --breakpoint-xsm: 429px;
   --breakpoint-sm: 430px;
+  --breakpoint-sm2: 440px;
   --breakpoint-md: 640px;
   --breakpoint-xmd: 768px;
   --breakpoint-lg: 1024px;