Fill Copyrights, Privacy, Terms, and Sitemap pages

app/(main)/copyrights/page.tsx

@@ -1,13 +1,15 @@
 import type { Metadata } from "next";
-import { LegalPlaceholderPage } from "@/components/LegalPlaceholderPage";
+import { LegalDocumentPage } from "@/components/LegalDocumentPage";
+import { COPYRIGHTS_DOCUMENT } from "@/lib/legal-content";
 import { buildPageMetadata } from "@/lib/site-seo";
 
 export const metadata: Metadata = buildPageMetadata({
-  title: "Copyrights",
-  description: "Copyrights for The Open Stock.",
-  path: "/copyrights",
+  title: COPYRIGHTS_DOCUMENT.title,
+  description: COPYRIGHTS_DOCUMENT.description,
+  path: COPYRIGHTS_DOCUMENT.path,
+  keywords: COPYRIGHTS_DOCUMENT.keywords,
 });
 
 export default function CopyrightsPage() {
-  return <LegalPlaceholderPage title="Copyrights" />;
+  return <LegalDocumentPage document={COPYRIGHTS_DOCUMENT} />;
 }

app/(main)/privacy-and-security/page.tsx

@@ -1,13 +1,15 @@
 import type { Metadata } from "next";
-import { LegalPlaceholderPage } from "@/components/LegalPlaceholderPage";
+import { LegalDocumentPage } from "@/components/LegalDocumentPage";
+import { PRIVACY_DOCUMENT } from "@/lib/legal-content";
 import { buildPageMetadata } from "@/lib/site-seo";
 
 export const metadata: Metadata = buildPageMetadata({
-  title: "Privacy & Security",
-  description: "Privacy and security for The Open Stock.",
-  path: "/privacy-and-security",
+  title: PRIVACY_DOCUMENT.title,
+  description: PRIVACY_DOCUMENT.description,
+  path: PRIVACY_DOCUMENT.path,
+  keywords: PRIVACY_DOCUMENT.keywords,
 });
 
 export default function PrivacyAndSecurityPage() {
-  return <LegalPlaceholderPage title="Privacy & Security" />;
+  return <LegalDocumentPage document={PRIVACY_DOCUMENT} />;
 }

app/(main)/sitemap/page.tsx

@@ -1,13 +1,15 @@
 import type { Metadata } from "next";
-import { LegalPlaceholderPage } from "@/components/LegalPlaceholderPage";
+import { HtmlSitemapPage } from "@/components/HtmlSitemapPage";
 import { buildPageMetadata } from "@/lib/site-seo";
 
 export const metadata: Metadata = buildPageMetadata({
   title: "Sitemap",
-  description: "Sitemap for The Open Stock.",
+  description:
+    "Directory of public The Open Stock pages: charts, news, ranking, tools, glossary, and legal resources.",
   path: "/sitemap",
+  keywords: ["sitemap", "site directory"],
 });
 
 export default function SitemapPage() {
-  return <LegalPlaceholderPage title="Sitemap" />;
+  return <HtmlSitemapPage />;
 }

app/(main)/terms-of-use/page.tsx

@@ -1,13 +1,15 @@
 import type { Metadata } from "next";
-import { LegalPlaceholderPage } from "@/components/LegalPlaceholderPage";
+import { LegalDocumentPage } from "@/components/LegalDocumentPage";
+import { TERMS_DOCUMENT } from "@/lib/legal-content";
 import { buildPageMetadata } from "@/lib/site-seo";
 
 export const metadata: Metadata = buildPageMetadata({
-  title: "Terms of Use",
-  description: "Terms of use for The Open Stock.",
-  path: "/terms-of-use",
+  title: TERMS_DOCUMENT.title,
+  description: TERMS_DOCUMENT.description,
+  path: TERMS_DOCUMENT.path,
+  keywords: TERMS_DOCUMENT.keywords,
 });
 
 export default function TermsOfUsePage() {
-  return <LegalPlaceholderPage title="Terms of Use" />;
+  return <LegalDocumentPage document={TERMS_DOCUMENT} />;
 }

components/HtmlSitemapPage.tsx

@@ -0,0 +1,62 @@
+import Link from "next/link";
+import { HTML_SITEMAP_GROUPS } from "@/lib/html-sitemap";
+import {
+  DNA_BODY_SECONDARY,
+  DNA_DISPLAY,
+  DNA_EYEBROW,
+  DNA_HEADING,
+  DNA_HERO_LEAD,
+  DNA_INSTRUMENT_PANEL,
+  DNA_MARKETING_STACK,
+  DNA_SECTION_RULE,
+} from "@/lib/design-dna";
+import { SITE_NAME } from "@/lib/site-seo";
+
+const sitemapLinkClass =
+  "underline decoration-stone-400 underline-offset-2 hover:text-stone-900 dark:hover:text-stone-100";
+
+export function HtmlSitemapPage() {
+  return (
+    <div className={DNA_MARKETING_STACK} data-testid="sitemap-page">
+      <header className={DNA_SECTION_RULE}>
+        <p className={DNA_EYEBROW}>Resources · Directory</p>
+        <h1 className={`mt-3 ${DNA_DISPLAY}`}>Sitemap</h1>
+        <p className={`mt-4 max-w-3xl ${DNA_HERO_LEAD}`}>
+          Public pages on {SITE_NAME}. Use this directory to jump to tools,
+          product surfaces, and legal resources.
+        </p>
+        <p className={`mt-3 ${DNA_BODY_SECONDARY}`}>
+          Machines can also read{" "}
+          <a href="/sitemap.xml" className={sitemapLinkClass}>
+            sitemap.xml
+          </a>
+          .
+        </p>
+      </header>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {HTML_SITEMAP_GROUPS.map((group) => (
+          <section
+            key={group.id}
+            id={group.id}
+            aria-labelledby={`sitemap-${group.id}-heading`}
+            className={DNA_INSTRUMENT_PANEL}
+          >
+            <h2 id={`sitemap-${group.id}-heading`} className={DNA_HEADING}>
+              {group.label}
+            </h2>
+            <ul className="mt-4 flex flex-col gap-3">
+              {group.links.map((link) => (
+                <li key={link.href}>
+                  <Link href={link.href} className={sitemapLinkClass}>
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}

components/LegalDocumentPage.tsx

@@ -0,0 +1,139 @@
+import Link from "next/link";
+import type { LegalDocument, LegalInline } from "@/lib/legal-content";
+import { isLegalLink } from "@/lib/legal-content";
+import {
+  DNA_BODY,
+  DNA_BODY_SECONDARY,
+  DNA_CALLOUT,
+  DNA_CAPTION,
+  DNA_DISPLAY,
+  DNA_EYEBROW,
+  DNA_HEADING,
+  DNA_HERO_LEAD,
+  DNA_MARKETING_STACK,
+  DNA_SECTION_RULE,
+} from "@/lib/design-dna";
+import { SITE_NAME } from "@/lib/site-seo";
+
+const legalLinkClass =
+  "underline decoration-stone-400 underline-offset-2 hover:text-stone-900 dark:hover:text-stone-100";
+
+function LegalRichText({ parts }: { parts: readonly LegalInline[] }) {
+  return (
+    <>
+      {parts.map((part, index) => {
+        if (!isLegalLink(part)) {
+          return <span key={index}>{part}</span>;
+        }
+
+        const className = legalLinkClass;
+        if (part.href.startsWith("/")) {
+          return (
+            <Link key={index} href={part.href} className={className}>
+              {part.label}
+            </Link>
+          );
+        }
+
+        const isMailOrTel =
+          part.href.startsWith("mailto:") || part.href.startsWith("tel:");
+        return (
+          <a
+            key={index}
+            href={part.href}
+            className={className}
+            {...(isMailOrTel
+              ? {}
+              : { target: "_blank", rel: "noopener noreferrer" })}
+          >
+            {part.label}
+          </a>
+        );
+      })}
+    </>
+  );
+}
+
+export function LegalDocumentPage({ document }: { document: LegalDocument }) {
+  const showAdviceCallout = document.slug === "terms-of-use";
+
+  return (
+    <div className={DNA_MARKETING_STACK} data-testid={`${document.slug}-page`}>
+      <header className={DNA_SECTION_RULE}>
+        <p className={DNA_EYEBROW}>Resources · Legal</p>
+        <h1 className={`mt-3 ${DNA_DISPLAY}`}>{document.title}</h1>
+        <p className={`mt-4 max-w-3xl ${DNA_HERO_LEAD}`}>{document.subtitle}</p>
+        <p className={`mt-3 ${DNA_CAPTION}`}>
+          {SITE_NAME} product copy — not a substitute for professional advice.
+        </p>
+      </header>
+
+      {showAdviceCallout ? (
+        <p className={DNA_CALLOUT} data-testid="not-advice-callout">
+          {SITE_NAME} is not legal, tax, accounting, or investment advice.
+          Charts, AI, rankings, and news are informational only. You can lose
+          money. Get qualified advice before you act.
+        </p>
+      ) : null}
+
+      {document.sections.map((section) => (
+        <section
+          key={section.id}
+          id={section.id}
+          aria-labelledby={`${document.slug}-${section.id}-heading`}
+          className="scroll-mt-24"
+        >
+          <h2
+            id={`${document.slug}-${section.id}-heading`}
+            className={DNA_HEADING}
+          >
+            {section.title}
+          </h2>
+          <div className="mt-3 max-w-3xl space-y-3">
+            {section.blocks.map((block, blockIndex) => {
+              if (block.type === "ul") {
+                return (
+                  <ul
+                    key={blockIndex}
+                    className={`list-disc space-y-2 pl-5 ${DNA_BODY}`}
+                  >
+                    {block.items.map((item, itemIndex) => (
+                      <li key={itemIndex}>
+                        <LegalRichText parts={item} />
+                      </li>
+                    ))}
+                  </ul>
+                );
+              }
+
+              return (
+                <p key={blockIndex} className={DNA_BODY}>
+                  <LegalRichText parts={block.parts} />
+                </p>
+              );
+            })}
+          </div>
+        </section>
+      ))}
+
+      <p className={`max-w-3xl ${DNA_BODY_SECONDARY}`}>
+        Related:{" "}
+        <Link href="/copyrights" className={legalLinkClass}>
+          Copyrights
+        </Link>
+        {" · "}
+        <Link href="/privacy-and-security" className={legalLinkClass}>
+          Privacy &amp; Security
+        </Link>
+        {" · "}
+        <Link href="/terms-of-use" className={legalLinkClass}>
+          Terms of Use
+        </Link>
+        {" · "}
+        <Link href="/sitemap" className={legalLinkClass}>
+          Sitemap
+        </Link>
+      </p>
+    </div>
+  );
+}

components/__tests__/HtmlSitemapPage.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { HtmlSitemapPage } from "@/components/HtmlSitemapPage";
+import { FOOTER_RESOURCES, FOOTER_TOOLS } from "@/lib/footer-content";
+
+describe("HtmlSitemapPage", () => {
+  it("renders grouped links for tools and resources", () => {
+    render(<HtmlSitemapPage />);
+    expect(screen.getByTestId("sitemap-page")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Sitemap" })
+    ).toBeInTheDocument();
+    for (const item of [...FOOTER_TOOLS, ...FOOTER_RESOURCES]) {
+      expect(screen.getByRole("link", { name: item.label })).toHaveAttribute(
+        "href",
+        item.href
+      );
+    }
+  });
+});

components/__tests__/LegalDocumentPage.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { LegalDocumentPage } from "@/components/LegalDocumentPage";
+import {
+  COPYRIGHTS_DOCUMENT,
+  PRIVACY_DOCUMENT,
+  TERMS_DOCUMENT,
+} from "@/lib/legal-content";
+
+describe("LegalDocumentPage", () => {
+  it("renders copyrights sections", () => {
+    render(<LegalDocumentPage document={COPYRIGHTS_DOCUMENT} />);
+    expect(screen.getByTestId("copyrights-page")).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Copyrights" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Content" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Licensing" })
+    ).toBeInTheDocument();
+  });
+
+  it("renders privacy contact details", () => {
+    render(<LegalDocumentPage document={PRIVACY_DOCUMENT} />);
+    expect(
+      screen.getByRole("heading", { level: 1, name: "Privacy & Security" })
+    ).toBeInTheDocument();
+    const mailLinks = screen.getAllByRole("link", {
+      name: "contact@ditectrev.com",
+    });
+    expect(mailLinks.length).toBeGreaterThan(0);
+    for (const link of mailLinks) {
+      expect(link).toHaveAttribute("href", "mailto:contact@ditectrev.com");
+    }
+  });
+
+  it("highlights the not-advice disclaimer on terms", () => {
+    render(<LegalDocumentPage document={TERMS_DOCUMENT} />);
+    expect(screen.getByTestId("not-advice-callout")).toHaveTextContent(
+      /not legal, tax, accounting, or investment advice/i
+    );
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Disclaimers" })
+    ).toBeInTheDocument();
+  });
+});

lib/__tests__/html-sitemap.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { FOOTER_RESOURCES, FOOTER_TOOLS } from "@/lib/footer-content";
+import { htmlSitemapPaths, HTML_SITEMAP_GROUPS } from "@/lib/html-sitemap";
+
+describe("html-sitemap", () => {
+  it("lists footer tools and resources", () => {
+    const paths = htmlSitemapPaths();
+    for (const item of [...FOOTER_TOOLS, ...FOOTER_RESOURCES]) {
+      expect(paths).toContain(item.href);
+    }
+  });
+
+  it("does not list agency service pages", () => {
+    const paths = htmlSitemapPaths();
+    expect(paths).not.toContain("/services");
+    expect(paths).not.toContain("/methodology");
+    expect(paths).not.toContain("/about-us");
+  });
+
+  it("groups product, tools, and resources", () => {
+    expect(HTML_SITEMAP_GROUPS.map((group) => group.id)).toEqual([
+      "product",
+      "tools",
+      "resources",
+    ]);
+  });
+});