adilallo
133 lines
3.9 KiB
TypeScript
133 lines
3.9 KiB
TypeScript
/**
|
|
* 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>
|
|
</>
|
|
);
|
|
}
|