Finish text section on article page add home link

app/blog/[slug]/page.js

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { getBlogPostBySlug, getAllPosts } from "../../../lib/contentProcessor";
 import ContentThumbnailTemplate from "../../components/ContentThumbnailTemplate";
 import ContentBanner from "../../components/ContentBanner";
+import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
 
 /**
  * Generate static params for all blog posts
@@ -74,17 +75,49 @@ export default async function BlogPostPage({ params }) {
   const relatedPosts = allPosts.filter((p) => p.slug !== post.slug).slice(0, 3); // Show up to 3 related posts
 
   return (
-    <div
-      className="min-h-screen"
-      style={{ backgroundColor: "var(--color-content-default-primary)" }}
-    >
+    <div className="min-h-screen bg-[#F4F3F1] relative overflow-hidden">
       {/* Content Banner */}
       <ContentBanner post={post} />
 
+      {/* Decorative Shapes */}
+      {/* Right Side Shape (3/4 up the page) */}
+      <div
+        className="hidden md:block absolute top-1/4 right-0 pointer-events-none z-10"
+        style={{ transform: "translateX(40%)" }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={getAssetPath(ASSETS.CONTENT_SHAPE_1)}
+          alt=""
+          className="w-auto h-auto max-w-none"
+          style={{
+            width: "clamp(120px, 15vw, 200px)",
+            height: "auto",
+          }}
+        />
+      </div>
+
+      {/* Left Side Shape (3/4 down the page) */}
+      <div
+        className="hidden md:block absolute top-1/2 left-0 pointer-events-none z-10"
+        style={{ transform: "translateX(-10%)" }}
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={getAssetPath(ASSETS.CONTENT_SHAPE_2)}
+          alt=""
+          className="w-auto h-auto max-w-none"
+          style={{
+            width: "clamp(100px, 12vw, 180px)",
+            height: "auto",
+          }}
+        />
+      </div>
+
       {/* Main Content */}
-      <article className="max-w-4xl mx-auto px-4 py-8">
+      <article className="p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)]">
         {/* Article Content */}
-        <div className="post-body max-w-none text-gray-800 leading-relaxed text-lg">
+        <div className="post-body -mt-[var(--spacing-scale-048)] text-[var(--color-content-inverse-primary)] text-[16px] leading-[24px] sm:text-[18px] sm:leading-[130%] lg:text-[24px] lg:leading-[32px] xl:text-[32px] xl:leading-[40px] sm:mx-auto sm:max-w-[390px] md:max-w-[472px] lg:max-w-[700px] xl:max-w-[904px]">
           <div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />
         </div>
       </article>

app/components/ConditionalHeader.js

@@ -0,0 +1,17 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Header from "./Header";
+import HomeHeader from "./HomeHeader";
+
+export default function ConditionalHeader() {
+  const pathname = usePathname();
+
+  // Show HomeHeader only on the homepage (/)
+  if (pathname === "/") {
+    return <HomeHeader />;
+  }
+
+  // Show regular Header on all other pages
+  return <Header />;
+}

app/components/ContentContainer.js

@@ -82,7 +82,7 @@ const ContentContainer = ({ post, width = "200px", size = "responsive" }) => {
             className={
               size === "xs"
                 ? "font-inter font-normal text-[12px] leading-[16px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
-                : "font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-inverse-brand-royal)] max-w-md"
+                : "font-inter font-normal text-[12px] leading-[16px] sm:text-[14px] sm:leading-[20px] md:text-[14px] md:leading-[20px] lg:text-[18px] lg:leading-[130%] xl:text-[24px] xl:leading-[32px] text-[var(--color-content-inverse-brand-royal)]"
             }
           >
             {post.frontmatter.description}

app/components/Logo.js

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { getAssetPath, ASSETS } from "../../lib/assetUtils";
 
 export default function Logo({ size = "default", showText = true }) {
@@ -115,52 +116,55 @@ export default function Logo({ size = "default", showText = true }) {
       : sizes.default;
 
   return (
-    <div
-      className={`flex items-center ${config.containerHeight} ${
-        showText ? config.gap : ""
-      } transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`}
-      role="link"
-      aria-label="CommunityRule Logo"
-    >
-      {/* Logo Text - only show if showText is true */}
-      {showText && (
-        <div
-          className={`font-bricolage-grotesque ${
+    <Link href="/" className="block">
+      <div
+        className={`flex items-center ${config.containerHeight} ${
+          showText ? config.gap : ""
+        } transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`}
+        role="link"
+        aria-label="CommunityRule Logo"
+      >
+        {/* Logo Text - only show if showText is true */}
+        {showText && (
+          <div
+            className={`font-bricolage-grotesque ${
+              size === "homeHeaderXsmall" ||
+              size === "homeHeaderSm" ||
+              size === "homeHeaderMd" ||
+              size === "homeHeaderLg" ||
+              size === "homeHeaderXl"
+                ? "text-[var(--color-content-inverse-primary)]"
+                : "text-[var(--color-content-default-primary)]"
+            } ${config.textSize} ${
+              config.lineHeight
+            } font-normal tracking-[0px] transition-colors duration-200`}
+            aria-label="CommunityRule"
+          >
+            CommunityRule
+          </div>
+        )}
+
+        {/* Vector Icon */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={getAssetPath(ASSETS.LOGO)}
+          alt="CommunityRule Logo Icon"
+          width={27.05}
+          height={27.05}
+          className={`flex-shrink-0 ${
+            config.iconSize
+          } transition-all duration-200 ${
             size === "homeHeaderXsmall" ||
             size === "homeHeaderSm" ||
             size === "homeHeaderMd" ||
             size === "homeHeaderLg" ||
             size === "homeHeaderXl"
-              ? "text-[var(--color-content-inverse-primary)]"
-              : "text-[var(--color-content-default-primary)]"
-          } ${config.textSize} ${
-            config.lineHeight
-          } font-normal tracking-[0px] transition-colors duration-200`}
-          aria-label="CommunityRule"
-        >
-          CommunityRule
-        </div>
-      )}
-
-      {/* Vector Icon */}
-      <img
-        src={getAssetPath(ASSETS.LOGO)}
-        alt="CommunityRule Logo Icon"
-        width={27.05}
-        height={27.05}
-        className={`flex-shrink-0 ${
-          config.iconSize
-        } transition-all duration-200 ${
-          size === "homeHeaderXsmall" ||
-          size === "homeHeaderSm" ||
-          size === "homeHeaderMd" ||
-          size === "homeHeaderLg" ||
-          size === "homeHeaderXl"
-            ? "filter brightness-0"
-            : ""
-        }`}
-        aria-hidden="true"
-      />
-    </div>
+              ? "filter brightness-0"
+              : ""
+          }`}
+          aria-hidden="true"
+        />
+      </div>
+    </Link>
   );
 }

app/layout.js

@@ -1,8 +1,9 @@
 import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
 import "./globals.css";
-import HomeHeader from "./components/HomeHeader";
 import Header from "./components/Header";
+import HomeHeader from "./components/HomeHeader";
 import Footer from "./components/Footer";
+import ConditionalHeader from "./components/ConditionalHeader";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -87,7 +88,7 @@ export default function RootLayout({ children }) {
         className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable}`}
       >
         <div className="min-h-screen flex flex-col">
-          <Header />
+          <ConditionalHeader />
           <main className="flex-1">{children}</main>
           <Footer />
         </div>

app/page.js

@@ -5,7 +5,6 @@ import RuleStack from "./components/RuleStack";
 import QuoteBlock from "./components/QuoteBlock";
 import FeatureGrid from "./components/FeatureGrid";
 import AskOrganizer from "./components/AskOrganizer";
-import HomeHeader from "./components/HomeHeader";
 
 export default function Page() {
   const heroBannerData = {
@@ -54,7 +53,6 @@ export default function Page() {
 
   return (
     <div>
-      <HomeHeader />
       <HeroBanner {...heroBannerData} />
       <LogoWall />
       <NumberedCards {...numberedCardsData} />