Finish text section on article page add home link

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>
   );
 }