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;

public/assets/Content_Banner.svg

@@ -0,0 +1,9 @@
+<svg width="320" height="225" viewBox="0 0 320 225" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="320" height="225.5" fill="url(#pattern0_19189_9191)"/>
+<defs>
+<pattern id="pattern0_19189_9191" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_19189_9191" transform="scale(0.00078125 0.00110865)"/>
+</pattern>
+<image id="image0_19189_9191" width="1280" height="902" preserveAspectRatio="none" xlink:href="data:image/png;base64,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ABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGMCIAAAAABkTAAEAAAAgIwJgAAAAACQMQEQAAAAADImAAIAAABAxgRAAAAAAMiYAAgAAAAAGRMAAQAAACBjAiAAAAAAZEwABAAAAICMCYAAAAAAkDEBEAAAAAAyJgACAAAAQMYEQAAAAADImAAIAAAAABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGMCIAAAAABkTAAEAAAAgIwJgAAAAACQMQEQAAAAADImAAIAAABAxgRAAAAAAMiYAAgAAAAAGRMAAQAAACBjAiAAAAAAZEwABAAAAICMCYAAAAAAkDEBEAAAAAAyJgACAAAAQMYEQAAAAADImAAIAAAAABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGMCIAAAAABkTAAEAAAAgIwJgAAAAACQMQEQAAAAADImAAIAAABAxgRAAAAAAMiYAAgAAAAAGRMAAQAAACBjAiAAAAAAZEwABAAAAICMCYAAAAAAkDEBEAAAAAAyJgACAAAAQMYEQAAAAADImAAIAAAAABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGNHBAAAAEDRPbExdrxrblBfp584Jj5w7f8b1MeIsYPiYJgABAAAAICMCYAAAAAAkDEBEAAAAAAyJgACAAAAQMYEQAAAAADImAAIAAAAABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGMCIAAAAABkTAAEAAAAgIwJgAAAAACQMQEQAAAAADImAAIAAABAxgRAAAAAAMiYAAgAAAAAGRMAAQAAACBjAiAAAAAAZEwABAAAAICMCYAAAAAAkDEBEAAAAAAyJgACAAAAQMYEQAAAAADImAAIAAAAABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGMCIAAAAABkTAAEAAAAgIwJgAAAAACQMQEQAAAAADImAAIAAABAxgRAAAAAAMiYAAgAAAAAGRMAAQAAACBjAiAAAAAAZEwABAAAAICMCYAAAAAAkDEBEAAAAAAyJgACAAAAQMYEQAAAAADImAAIAAAAABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGMCIAAAAABkTAAEAAAAgIwJgAAAAACQMQEQAAAAADImAAIAAABAxgRAAAAAAMiYAAgAAAAAGRMAAQAAACBjAiAAAAAAZEwABAAAAICMCYAAAAAAkDEBEAAAAAAyJgACAAAAQMYEQAAAAADImAAIAAAAABkTAAEAAAAgYwIgAAAAAGRMAAQAAACAjAmAAAAAAJAxARAAAAAAMiYAAgAAAEDGBEAAAAAAyJgACAAAAAAZEwABAAAAIGMCIAAAAABkTAAEAAAAgIwJgAAAAACQMQEQAAAAADImAAIAAABAxgRAAAAAAMiYAAgAAAAAGRMAAQAAACBjAiAAAAAAZEwABAAAAICMHREAAAAAPdS8qSXatndEc0drtG3b+dxeeU5vt29/4XO37p/bn1EDhr3k7bYnng3g4AiAAAAAwEukwDdv/cpqtJvfvut5149T7OvVv/Zuf/7ut7vaNwRwcPptWN/WFQAAAEBDSlN7Ta2LYvmm1mroS5Evvb37pN7g7Z0xeGtnjF2/LYZs64yTO7bv/LnK24O3d1WfR3TseP7XH7NtR/Xne2LVgH3PKP33sCPjr84ZHodiyBEDYvyQU6qPkQOGxYTq2yNjSP8BATkTAAEAAKBBpNg3t31FzKuEvodaF1efXzzNN659a+WxrRL7tlajXno7Bb96+8Wwo+K6154QvWH3MHjx8DHVY8cpDEIuBEAAAADIVAp+U1fPqU72zdoV/LqlCb5xbVtjbCXwjavEvrHrt1fjX1H1ZgDck+4omILgxGFjTApSagIgAAAAZKJ7wm/66rkxrfLonu7bPfZdsHZLYab6eqKvA+CeXFwNgd1R8ExBkNIQAAEAAKDE0rKOqZXYl6JfmvBLd/eN2LQ9LmjdEue3bq48by1d7NuTIgTAF+sOglecOKESBc8MKCoBEAAAAEqmqWVRzGpZHNPX7Ix+acLv0mc6qsFv0uqOHi/gKIMiBsDdpSLine truncated
+</defs>
+</svg>