Implement how it works page

2026-05-17 22:40:06 -06:00
parent 450da4d8ab
commit 40ce5064d6
35 changed files with 707 additions and 123 deletions
@@ -0,0 +1,43 @@
+/**
+ * Figma: "A Guide to CommunityRule" body ornaments (22078:791901)
+ * https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22078-791901
+ *
+ * - 19003:23575 — concentric circles, right (`how-shape-2.svg`)
+ * - 19003:23576 — loop mark, left (`how-shape-1.svg`)
+ */
+import {
+  getAssetPath,
+  howItWorksOrnamentLeftPath,
+  howItWorksOrnamentRightPath,
+} from "../../../../lib/assetUtils";
+
+export default function HowItWorksDecorativeShapes() {
+  return (
+    <>
+      <div
+        aria-hidden
+        className="pointer-events-none absolute z-0 hidden aspect-square md:block left-[84.86%] right-[-9.28%] top-[clamp(200px,20vw,255px)]"
+        data-node-id="19003:23575"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={getAssetPath(howItWorksOrnamentRightPath())}
+          alt=""
+          className="pointer-events-none size-full max-w-none object-cover"
+        />
+      </div>
+      <div
+        aria-hidden
+        className="pointer-events-none absolute z-0 hidden aspect-square md:block left-[-1.66%] right-[88.38%] top-[clamp(520px,55vw,811px)]"
+        data-node-id="19003:23576"
+      >
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={getAssetPath(howItWorksOrnamentLeftPath())}
+          alt=""
+          className="pointer-events-none size-full max-w-none object-cover"
+        />
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,132 @@
+/**
+ * Figma: "How Community Rule works" (22078:806964)
+ * https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22078-806964
+ */
+import type { Metadata } from "next";
+import dynamic from "next/dynamic";
+import messages from "../../../messages/en/index";
+import { getAllBlogPosts } from "../../../lib/content";
+import {
+  buildHowItWorksSyntheticPost,
+  HOW_IT_WORKS_SENTINEL_SLUG,
+} from "../../../lib/howItWorksSyntheticPost";
+import ContentBanner from "../../components/sections/ContentBanner";
+import HowItWorksDecorativeShapes from "./_components/HowItWorksDecorativeShapes";
+import AskOrganizer from "../../components/sections/AskOrganizer";
+import "../blog/blog.css";
+
+const RelatedArticles = dynamic(
+  () => import("../../components/sections/RelatedArticles"),
+  {
+    loading: () => (
+      <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
+    ),
+    ssr: true,
+  },
+);
+
+export async function generateMetadata(): Promise<Metadata> {
+  const meta = messages.metadata.howItWorks;
+  const page = messages.pages.howItWorks;
+
+  return {
+    title: meta.title,
+    description: meta.description,
+    keywords: meta.keywords,
+    openGraph: {
+      title: page.banner.title,
+      description: page.banner.description,
+      type: "website",
+      siteName: "CommunityRule",
+    },
+  };
+}
+
+export default function HowItWorksPage() {
+  const page = messages.pages.howItWorks;
+  const syntheticPost = buildHowItWorksSyntheticPost(page);
+
+  const allPosts = getAllBlogPosts();
+  const relatedPosts = allPosts.slice(0, 8);
+  const slugOrder = allPosts.map((post) => post.slug);
+
+  const askOrganizerData = {
+    title: messages.pages.home.askOrganizer.title,
+    subtitle: messages.pages.home.askOrganizer.subtitle,
+    buttonText: messages.pages.home.askOrganizer.buttonText,
+  };
+
+  const structuredData = {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    name: page.banner.title,
+    description: page.banner.description,
+    url: "https://communityrule.com/how-it-works",
+    publisher: {
+      "@type": "Organization",
+      name: "CommunityRule",
+      url: "https://communityrule.com",
+    },
+  };
+
+  const breadcrumbData = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+      {
+        "@type": "ListItem",
+        position: 1,
+        name: "Home",
+        item: "https://communityrule.com",
+      },
+      {
+        "@type": "ListItem",
+        position: 2,
+        name: page.banner.title,
+        item: "https://communityrule.com/how-it-works",
+      },
+    ],
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(structuredData),
+        }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify(breadcrumbData),
+        }}
+      />
+
+      <div className="relative min-h-screen overflow-x-hidden bg-transparent">
+        <ContentBanner post={syntheticPost} variant="guide" />
+
+        <div className="relative w-full">
+          <HowItWorksDecorativeShapes />
+
+          <article className="relative z-10 p-[var(--spacing-scale-024)] sm:py-[var(--spacing-scale-032)]">
+            <div
+              className="post-body -mt-[var(--spacing-scale-048)] text-[var(--color-content-default-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]"
+              dangerouslySetInnerHTML={{ __html: syntheticPost.htmlContent }}
+            />
+          </article>
+        </div>
+
+        <RelatedArticles
+          relatedPosts={relatedPosts}
+          currentPostSlug={HOW_IT_WORKS_SENTINEL_SLUG}
+          slugOrder={slugOrder}
+          headingSurface="onLight"
+          heading={page.relatedArticles.title}
+        />
+
+        <AskOrganizer {...askOrganizerData} />
+      </div>
+    </>
+  );
+}
@@ -76,6 +76,7 @@ export default function Page() {
        iconColor: "orange",
      },
    ],
+    seeHowItWorksHref: t("cardSteps.buttons.seeHowItWorksHref"),
  };

  const featureGridData = {