diff --git a/app/blog/[slug]/page.js b/app/blog/[slug]/page.js index 9d3f86f..cdcb426 100644 --- a/app/blog/[slug]/page.js +++ b/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 ( -
+
{/* Content Banner */} + {/* Decorative Shapes */} + {/* Right Side Shape (3/4 up the page) */} +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+ + {/* Left Side Shape (3/4 down the page) */} +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+ {/* Main Content */} -
+
{/* Article Content */} -
+
diff --git a/app/components/ConditionalHeader.js b/app/components/ConditionalHeader.js new file mode 100644 index 0000000..875c1db --- /dev/null +++ b/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 ; + } + + // Show regular Header on all other pages + return
; +} diff --git a/app/components/ContentContainer.js b/app/components/ContentContainer.js index 95f9fa7..b975581 100644 --- a/app/components/ContentContainer.js +++ b/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} diff --git a/app/components/Logo.js b/app/components/Logo.js index 0c6f096..1d44788 100644 --- a/app/components/Logo.js +++ b/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 ( -
- {/* Logo Text - only show if showText is true */} - {showText && ( -
+
+ {/* Logo Text - only show if showText is true */} + {showText && ( +
+ CommunityRule +
+ )} + + {/* Vector Icon */} + {/* eslint-disable-next-line @next/next/no-img-element */} + CommunityRule Logo Icon - CommunityRule -
- )} - - {/* Vector Icon */} - -
+ ? "filter brightness-0" + : "" + }`} + aria-hidden="true" + /> +
+ ); } diff --git a/app/layout.js b/app/layout.js index 20621fd..871f049 100644 --- a/app/layout.js +++ b/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}`} >
-
+
{children}
diff --git a/app/page.js b/app/page.js index f8b2f05..41d2fd0 100644 --- a/app/page.js +++ b/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 (
- diff --git a/lib/assetUtils.js b/lib/assetUtils.js index e729b1e..0ef4211 100644 --- a/lib/assetUtils.js +++ b/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", }; diff --git a/public/assets/Content_Shape_1.svg b/public/assets/Content_Shape_1.svg new file mode 100644 index 0000000..f491897 --- /dev/null +++ b/public/assets/Content_Shape_1.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/Content_Shape_2.svg b/public/assets/Content_Shape_2.svg new file mode 100644 index 0000000..ebe2717 --- /dev/null +++ b/public/assets/Content_Shape_2.svg @@ -0,0 +1,3 @@ + + +