From d500cf2c91b8592873def291bb840b74646492f1 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Mon, 8 Sep 2025 18:34:28 -0600 Subject: [PATCH] Content Banner default and sm breakpoint --- app/blog/[slug]/page.js | 32 ++++-------------------------- app/components/ContentBanner.js | 25 +++++++++++++++++++++++ app/components/ContentContainer.js | 7 ++++++- app/tailwind.css | 1 + public/assets/Content_Banner.svg | 9 +++++++++ 5 files changed, 45 insertions(+), 29 deletions(-) create mode 100644 app/components/ContentBanner.js create mode 100644 public/assets/Content_Banner.svg 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 */}
+ + + + + + + +