diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js index d9ceecf..9d3f86f 100644 --- a/app/blog/[slug]/page.js +++ b/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 */} + + {/* Main Content */}
- {/* Article Header */} -
-
- - ← Back to Blog - -
- -

- {post.frontmatter.title} -

- -
- {post.frontmatter.author} - • - -
-
- {/* Article Content */}
diff --git a/app/components/ContentBanner.js b/app/components/ContentBanner.js new file mode 100644 index 0000000..21219c0 --- /dev/null +++ b/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 ( +
+ {/* Background SVG */} +
+ + {/* Content Container */} +
+ {/* ContentContainer with post data */} + +
+
+ ); +} diff --git a/app/components/ContentContainer.js b/app/components/ContentContainer.js index 56f90bd..43a06f1 100644 --- a/app/components/ContentContainer.js +++ b/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 ( -
+
{/* Content Container - gap between icon and text */}
+ + + + + + + +