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} />

lib/assetUtils.js

@@ -51,4 +51,8 @@ export const ASSETS = {
   ICON_1: "assets/Content_Thumbnail/Icon_1.svg",
   ICON_2: "assets/Content_Thumbnail/Icon_2.svg",
   ICON_3: "assets/Content_Thumbnail/Icon_3.svg",
+
+  // Content page decorative shapes
+  CONTENT_SHAPE_1: "assets/Content_Shape_1.svg",
+  CONTENT_SHAPE_2: "assets/Content_Shape_2.svg",
 };

public/assets/Content_Shape_1.svg

@@ -0,0 +1,3 @@
+<svg width="234" height="172" viewBox="0 0 234 172" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.2675 34.2685C79.9588 -11.4228 154.039 -11.4229 199.73 34.2685C236.983 71.521 243.86 127.643 220.368 171.866L117.039 68.537L13.6562 171.919C-9.86917 127.688 -2.99976 71.5357 34.2675 34.2685Z" fill="#D96043"/>
+</svg>

public/assets/Content_Shape_2.svg

@@ -0,0 +1,3 @@
+<svg width="342" height="344" viewBox="0 0 342 344" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M118.288 12.5433C150.229 34.7872 162.119 68.5035 168.935 105.149C169.707 110.09 170.397 115.031 171.057 119.99C171.394 117.579 171.731 115.169 172.077 112.685C177.325 77.1559 185.929 40.9064 215.238 17.1645C236.927 2.2815 257.725 -1.11327 283.544 1.26373C303.516 5.82167 320.267 18.225 331.82 34.9535C343.001 53.7417 344.063 75.7773 339.381 96.9417C330.87 122.519 312.263 141.739 288.717 154.441C265.149 165.464 239.131 169.661 213.505 172.992C214.711 173.129 215.917 173.266 217.159 173.408C241.352 176.254 263.526 179.308 285.666 189.953C287.395 190.759 289.124 191.565 290.906 192.396C313.367 203.807 330.05 220.692 338.328 244.546C343.524 263.885 342.719 283.966 334.481 302.318C324.48 319.467 309.006 334.493 290.11 341.192C266.052 346.351 241.153 345.015 219.872 332C193.359 313.969 181.95 285.105 175.974 254.641C174.949 248.634 174.007 242.632 173.18 236.595C170.385 244.78 167.855 253.008 165.438 261.311C156.085 292.795 142.049 318.819 112.883 335.834C93.1421 344.906 67.67 346.817 47.0305 339.288C25.345 328.839 12.1627 314.381 3.09877 292.165C0.865179 283.866 0.451618 276.292 0.470662 267.734C0.475792 265.341 0.475792 265.341 0.481025 262.899C0.756462 250.422 2.98825 240.879 9.7561 230.235C11.0256 228.049 12.295 225.862 13.6029 223.61C37.2419 192.575 72.0073 179.898 109.508 174.45C113.75 173.934 117.993 173.436 122.243 172.992C120.962 172.726 119.68 172.461 118.361 172.187C76.097 163.315 39.071 154.069 11.8785 117.869C0.464159 97.7352 -3.12551 72.9128 2.86664 50.3657C4.87835 45.7555 7.10325 41.5749 9.7561 37.3055C10.9818 35.1191 12.2075 32.9328 13.4703 30.6802C39.1729 -2.12668 82.8101 -9.3554 118.288 12.5433Z" fill="#080033"/>
+</svg>