@tomako/tools-runtime 0.1.0

package/src/features/tools/shared/tool-content-sections.tsx

@@ -0,0 +1,659 @@
+import { Download, FileText, Minus, Plus, ShieldCheck, Sparkles } from "lucide-react";
+import type { ReactNode } from "react";
+
+export type ToolTextCard = {
+  title: string;
+  body: string;
+};
+
+export type ToolFaqItem = {
+  question: string;
+  answer: string;
+};
+
+export type ToolBoundaryGroup = {
+  title: string;
+  items: readonly string[];
+};
+
+export type ToolComparisonItem = {
+  before: string;
+  after: string;
+};
+
+export type ToolTripleComparisonItem = {
+  standard: string;
+  manual: string;
+  tomako: string;
+};
+
+const sectionBorderClass = "border-t border-[#E8EBF0]";
+const sectionHeadingClass =
+  "text-[2rem] font-semibold leading-[1.18] text-[#0D1216] md:text-[40px]";
+const sectionIntroClass = "mt-4 max-w-3xl text-base leading-7 text-[#555E66]";
+const sectionCardClass =
+  "rounded-2xl border border-[#E5E9F0] bg-[#F6F7F8] p-6 shadow-none";
+const cardIcons = [FileText, Sparkles, Download, ShieldCheck] as const;
+
+export function ToolSection({
+  heading,
+  intro,
+  children,
+  visual,
+  reverse = false,
+  /** `wide`：标题仍窄栏，子内容拉满容器（Use cases / 对比表等避免塞进 max-w-3xl 跑版） */
+  contentWidth = "narrow",
+}: {
+  heading: string;
+  intro?: string;
+  children?: ReactNode;
+  visual?: ReactNode;
+  reverse?: boolean;
+  contentWidth?: "narrow" | "wide";
+}) {
+  const headingBlock = (
+    <div className="max-w-3xl">
+      <h2 className={sectionHeadingClass}>{heading}</h2>
+      {intro ? <p className={sectionIntroClass}>{intro}</p> : null}
+    </div>
+  );
+
+  const childrenBlock = children ? (
+    <div className={contentWidth === "wide" ? "mt-7 w-full min-w-0" : "mt-7 max-w-3xl"}>
+      {children}
+    </div>
+  ) : null;
+
+  if (!visual) {
+    return (
+      <section className={`${sectionBorderClass} py-16 md:py-20`}>
+        {headingBlock}
+        {childrenBlock}
+      </section>
+    );
+  }
+
+  return (
+    <section className={`grid gap-8 ${sectionBorderClass} py-16 lg:grid-cols-2 lg:items-center lg:gap-12 lg:py-20`}>
+      <div className={reverse ? "lg:order-2 lg:pl-6" : "lg:pr-6"}>
+        {headingBlock}
+        {childrenBlock}
+      </div>
+      <div className={reverse ? "lg:order-1" : ""}>{visual}</div>
+    </section>
+  );
+}
+
+export function ToolTextRows({ items }: { items: readonly string[] }) {
+  return (
+    <div className="space-y-4">
+      {items.map((item) => (
+        <p key={item} className="text-base leading-7 text-[#3D3D3D]">
+          {item}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+/** Numbered list with circular step badges — used for how-to steps. */
+export function ToolNumberedRows({ items }: { items: readonly string[] }) {
+  return (
+    <ol className="divide-y divide-[#E1DDD3] border-y border-[#E1DDD3] text-base leading-relaxed text-[#3D3D3D]">
+      {items.map((item, index) => (
+        <li key={item} className="flex gap-3 py-4">
+          <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-[#111111] text-xs font-semibold text-white">
+            {index + 1}
+          </span>
+          <span>{item}</span>
+        </li>
+      ))}
+    </ol>
+  );
+}
+
+/** Divided list with top/bottom borders — used inside ToolGuideSection children. */
+export function ToolDividedRows({ items }: { items: readonly string[] }) {
+  return (
+    <div className="divide-y divide-[#E1DDD3] border-y border-[#E1DDD3]">
+      {items.map((item) => (
+        <p key={item} className="py-4 text-base leading-7 text-[#3D3D3D]">
+          {item}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export function ToolCardGrid({
+  items,
+  columns = "three",
+  size = "regular",
+}: {
+  items: readonly ToolTextCard[];
+  columns?: "one" | "two" | "three" | "four";
+  /** `prominent` renders larger title/body, matching the older per-tool ValueGrid look. */
+  size?: "regular" | "prominent";
+}) {
+  const prominent = size === "prominent";
+  const colClass =
+    columns === "one"
+      ? ""
+      : columns === "four"
+        ? "md:grid-cols-2 xl:grid-cols-4"
+        : columns === "three"
+          ? "md:grid-cols-2 xl:grid-cols-3"
+          : "md:grid-cols-2";
+
+  return (
+    <div className={`grid gap-5 ${colClass}`}>
+      {items.map((item, index) => {
+        const CardIcon = cardIcons[index % cardIcons.length];
+
+        return (
+          <article key={item.title} className={sectionCardClass}>
+            <span className="mb-5 flex size-12 items-center justify-center rounded-lg bg-[#E4E9F3] text-[#0D1216]">
+              <CardIcon aria-hidden className="size-5" />
+            </span>
+            <h3
+              className={
+                prominent
+                  ? "text-xl font-semibold leading-snug text-[#0D1216]"
+                  : "text-lg font-semibold leading-tight text-[#0D1216]"
+              }
+            >
+              {item.title}
+            </h3>
+            <p className="mt-3 text-base leading-7 text-[#555E66]">
+              {item.body}
+            </p>
+          </article>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ToolValueSection({
+  heading,
+  intro,
+  items,
+  visual,
+  reverse,
+}: {
+  heading: string;
+  intro?: string;
+  items: readonly ToolTextCard[];
+  visual?: ReactNode;
+  reverse?: boolean;
+}) {
+  if (!visual) {
+    return (
+      <section className={`${sectionBorderClass} py-16 md:py-20`}>
+        <div className="mx-auto max-w-3xl text-center">
+          <h2 className={sectionHeadingClass}>{heading}</h2>
+          {intro ? <p className="mt-4 text-base leading-7 text-[#555E66]">{intro}</p> : null}
+        </div>
+        <div className="mt-10">
+          <ToolCardGrid items={items} />
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <ToolSection heading={heading} intro={intro} visual={visual} reverse={reverse}>
+      <ToolCardGrid items={items} />
+    </ToolSection>
+  );
+}
+
+export function ToolStandardsSection({
+  heading,
+  intro,
+  items,
+}: {
+  heading: string;
+  intro?: string;
+  items: readonly ToolTextCard[];
+}) {
+  return (
+    <ToolSection heading={heading} intro={intro}>
+      <ToolCardGrid items={items} />
+    </ToolSection>
+  );
+}
+
+export function ToolUseCasesSection({
+  heading,
+  intro,
+  items,
+  visual,
+  reverse,
+}: {
+  heading: string;
+  intro?: string;
+  items: readonly ToolTextCard[];
+  visual?: ReactNode;
+  reverse?: boolean;
+}) {
+  return (
+    <ToolSection heading={heading} intro={intro} visual={visual} reverse={reverse}>
+      <ToolCardGrid items={items} columns={visual ? "one" : "two"} />
+    </ToolSection>
+  );
+}
+
+export function ToolBoundarySection({
+  heading,
+  intro,
+  groups,
+  visual,
+  reverse,
+}: {
+  heading: string;
+  intro?: string;
+  groups: readonly ToolBoundaryGroup[];
+  visual?: ReactNode;
+  reverse?: boolean;
+}) {
+  return (
+    <ToolSection heading={heading} intro={intro} visual={visual} reverse={reverse}>
+      <div className="grid gap-4">
+        {groups.map((group) => (
+          <article
+            key={group.title}
+            className={sectionCardClass}
+          >
+            <h3 className="text-lg font-semibold leading-tight text-[#0D1216]">
+              {group.title}
+            </h3>
+            <ul className="mt-4 grid gap-3 text-base leading-7 text-[#555E66]">
+              {group.items.map((item) => (
+                <li key={item} className="flex gap-3">
+                  <span className="mt-3 size-1.5 shrink-0 rounded-full bg-[#0D1216]" />
+                  <span>{item}</span>
+                </li>
+              ))}
+            </ul>
+          </article>
+        ))}
+      </div>
+    </ToolSection>
+  );
+}
+
+export function ToolComparisonSection({
+  heading,
+  intro,
+  beforeLabel,
+  afterLabel,
+  items,
+}: {
+  heading: string;
+  intro?: string;
+  beforeLabel: string;
+  afterLabel: string;
+  items: readonly ToolComparisonItem[];
+}) {
+  return (
+    <ToolSection heading={heading} intro={intro}>
+      <div className="overflow-hidden rounded-3xl border border-[#E5E9F0] bg-white shadow-[0_24px_64px_rgba(13,18,22,0.08)]">
+        <div className="grid grid-cols-2 border-b border-[#E5E9F0] bg-[#F6F7F8] text-xs font-semibold uppercase text-[#6A737D]">
+          <p className="border-r border-[#E5E9F0] px-6 py-5">{beforeLabel}</p>
+          <p className="px-6 py-5">{afterLabel}</p>
+        </div>
+        <div className="divide-y divide-[#E5E9F0]">
+          {items.map((item) => (
+            <div key={`${item.before}-${item.after}`} className="grid sm:grid-cols-2">
+              <p className="border-b border-[#E5E9F0] px-6 py-5 text-base leading-7 text-[#555E66] sm:border-b-0 sm:border-r">
+                {item.before}
+              </p>
+              <p className="bg-[#F3FBEA] px-6 py-5 text-base font-semibold leading-7 text-[#0D1216]">
+                {item.after}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </ToolSection>
+  );
+}
+
+export function ToolFaqSection({
+  heading,
+  intro,
+  items,
+}: {
+  heading: string;
+  intro?: string;
+  items: readonly ToolFaqItem[];
+}) {
+  return (
+    <section className={`${sectionBorderClass} py-16 md:py-20`}>
+      <div className="grid gap-10 lg:grid-cols-[0.42fr_0.58fr] lg:gap-16">
+        <div>
+          <h2 className={sectionHeadingClass}>{heading}</h2>
+          {intro ? <p className={sectionIntroClass}>{intro}</p> : null}
+        </div>
+        <div>
+          {items.map((item, index) => (
+            <details
+              key={item.question}
+              className="group border-b border-[#0D1216] first:border-t"
+              open={index === 0}
+            >
+              <summary className="flex cursor-pointer list-none items-start justify-between gap-6 py-6 [&::-webkit-details-marker]:hidden">
+                <h3 className="text-xl font-semibold leading-snug text-[#0D1216] md:text-2xl">
+                  {item.question}
+                </h3>
+                <span className="mt-1 flex size-8 shrink-0 items-center justify-center rounded-full text-[#0D1216]">
+                  <Plus aria-hidden className="size-5 group-open:hidden" />
+                  <Minus aria-hidden className="hidden size-5 group-open:block" />
+                </span>
+              </summary>
+              <p className="max-w-3xl pb-6 text-base leading-7 text-[#555E66]">
+                {item.answer}
+              </p>
+            </details>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+/** Grid of plain-text use-case cards (no title/body split). */
+export function ToolUseCaseBand({ items }: { items: readonly string[] }) {
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+      {items.map((item) => (
+        <p
+          key={item}
+          className="min-w-0 break-words rounded-[1.25rem] border border-[#D8D4CA] bg-[#FAFAFA] p-5 text-base leading-7 text-[#3D3D3D] text-pretty"
+        >
+          {item}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export function ToolUseCasesBandSection({
+  heading,
+  intro,
+  items,
+}: {
+  heading: string;
+  intro?: string;
+  items: readonly string[];
+}) {
+  return (
+    <ToolSection heading={heading} intro={intro} contentWidth="wide">
+      <ToolUseCaseBand items={items} />
+    </ToolSection>
+  );
+}
+
+/** Three-column comparison: standard / manual / tomako. */
+export function ToolTripleComparisonSection({
+  heading,
+  intro,
+  items,
+}: {
+  heading: string;
+  intro?: string;
+  items: readonly ToolTripleComparisonItem[];
+}) {
+  return (
+    <ToolSection heading={heading} intro={intro} contentWidth="wide">
+      <div className="overflow-hidden rounded-[1.5rem] border border-[#D8D4CA] bg-white shadow-[0_18px_50px_rgba(17,17,17,0.06)]">
+        {items.map((item) => (
+          <article
+            key={item.standard}
+            className="grid border-b border-[#E8E4DB] last:border-b-0 md:grid-cols-[0.9fr_1fr_1.15fr]"
+          >
+            <h3 className="bg-[#F7F6F2] px-5 py-4 text-sm font-semibold leading-6 text-[#111111] md:flex md:items-center">
+              {item.standard}
+            </h3>
+            <p className="border-t border-[#E8E4DB] px-5 py-4 text-sm leading-6 text-[#6B6257] md:border-l md:border-t-0">
+              {item.manual}
+            </p>
+            <p className="border-t border-[#E8E4DB] px-5 py-4 text-sm leading-6 text-[#111111] md:border-l md:border-t-0">
+              {item.tomako}
+            </p>
+          </article>
+        ))}
+      </div>
+    </ToolSection>
+  );
+}
+
+export function ToolSectionEyebrow({
+  children,
+  tone = "default",
+}: {
+  children: string;
+  tone?: "default" | "coral" | "blue";
+}) {
+  const toneClass =
+    tone === "coral"
+      ? "text-[#D85435]"
+      : tone === "blue"
+        ? "text-[#075DF5]"
+        : "text-[#777777]";
+  return (
+    <p className={`text-xs font-semibold uppercase tracking-[0.08em] ${toneClass}`}>
+      {children}
+    </p>
+  );
+}
+
+/** Grid of plain-text cards (value props without title/body split). */
+export function ToolPlainTextGrid({
+  items,
+  columns = "two",
+}: {
+  items: readonly string[];
+  columns?: "two" | "three" | "four";
+}) {
+  const colClass =
+    columns === "four"
+      ? "md:grid-cols-2 xl:grid-cols-4"
+      : columns === "three"
+        ? "md:grid-cols-3"
+        : "md:grid-cols-2";
+  return (
+    <div className={`grid gap-4 ${colClass}`}>
+      {items.map((item) => (
+        <article
+          key={item}
+          className="rounded-[1.25rem] border border-[#D8D4CA] bg-white p-5"
+        >
+          <p className="text-sm leading-6 text-[#3D3D3D]">{item}</p>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+/** FAQ as divided rows (lighter than card-style ToolFaqSection). */
+export function ToolDividedFaqList({ items }: { items: readonly ToolFaqItem[] }) {
+  return (
+    <div className="divide-y divide-[#E1DDD3] border-y border-[#E1DDD3]">
+      {items.map((item) => (
+        <article key={item.question} className="py-4">
+          <h3 className="text-base font-semibold text-[#111111]">{item.question}</h3>
+          <p className="mt-2 text-sm leading-6 text-[#555555]">{item.answer}</p>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+/** Numbered use-case cards. */
+export function ToolNumberedUseCaseGrid({ items }: { items: readonly string[] }) {
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      {items.map((item, index) => (
+        <article
+          key={item}
+          className="rounded-[1.25rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_12px_28px_rgba(17,17,17,0.05)]"
+        >
+          <span className="flex size-9 items-center justify-center rounded-full bg-[#F7F6F2] text-sm font-semibold text-[#111111]">
+            {String(index + 1).padStart(2, "0")}
+          </span>
+          <p className="mt-4 text-sm leading-6 text-[#3D3D3D]">{item}</p>
+        </article>
+      ))}
+    </div>
+  );
+}
+
+export function ToolBoundaryAside({
+  title,
+  items,
+  body,
+}: {
+  title: string;
+  items?: readonly string[];
+  body?: string;
+}) {
+  return (
+    <aside className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_18px_46px_rgba(17,17,17,0.06)] md:p-6">
+      <p className="text-xs font-semibold uppercase tracking-[0.08em] text-[#777777]">
+        {title}
+      </p>
+      {body ? <p className="mt-3 text-sm leading-6 text-[#555555]">{body}</p> : null}
+      {items ? (
+        <ul className="mt-5 grid gap-4">
+          {items.map((item) => (
+            <li key={item} className="flex gap-3 text-sm leading-6 text-[#555555]">
+              <span className="mt-2 size-2 shrink-0 rounded-full bg-[#111111]" />
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </aside>
+  );
+}
+
+export type ToolCodeGuideItem = {
+  title: string;
+  body: string;
+  code: string;
+};
+
+export function ToolCodeGuidesSection({
+  eyebrow = "Implementation",
+  heading,
+  intro,
+  items,
+}: {
+  eyebrow?: string;
+  heading: string;
+  intro: string;
+  items: readonly ToolCodeGuideItem[];
+}) {
+  return (
+    <section className="border-t border-[#E1DDD3] py-14 md:py-16">
+      <div className="max-w-3xl">
+        <ToolSectionEyebrow tone="coral">{eyebrow}</ToolSectionEyebrow>
+        <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+          {heading}
+        </h2>
+        <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
+      </div>
+      <div className="mt-8 grid gap-4 lg:grid-cols-2">
+        {items.map((item) => (
+          <article
+            key={item.title}
+            className="overflow-hidden rounded-[1.25rem] border border-[#D8D4CA] bg-white shadow-[0_12px_28px_rgba(17,17,17,0.05)]"
+          >
+            <div className="p-5">
+              <h3 className="text-lg font-semibold text-[#111111]">{item.title}</h3>
+              <p className="mt-2 text-sm leading-6 text-[#555555]">{item.body}</p>
+            </div>
+            <pre className="overflow-x-auto bg-[#111111] p-5 text-xs leading-6 text-white">
+              <code>{item.code}</code>
+            </pre>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+/** Split section with eyebrow + border-left card items + visual slot. */
+export function ToolSplitCardSection({
+  eyebrow,
+  heading,
+  items,
+  visual,
+  reverse = false,
+  eyebrowTone = "coral",
+}: {
+  eyebrow: string;
+  heading: string;
+  items: readonly ToolTextCard[];
+  visual: ReactNode;
+  reverse?: boolean;
+  eyebrowTone?: "default" | "coral" | "blue";
+}) {
+  return (
+    <section className="grid gap-8 border-t border-[#E1DDD3] py-14 md:grid-cols-2 md:items-center md:py-16">
+      <div className={reverse ? "md:order-2" : ""}>
+        <ToolSectionEyebrow tone={eyebrowTone}>{eyebrow}</ToolSectionEyebrow>
+        <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+          {heading}
+        </h2>
+        <div className="mt-6 grid gap-4">
+          {items.map((item) => (
+            <article key={item.title} className="border-l-2 border-[#111111] pl-4">
+              <h3 className="text-base font-semibold text-[#111111]">{item.title}</h3>
+              <p className="mt-2 text-sm leading-6 text-[#555555]">{item.body}</p>
+            </article>
+          ))}
+        </div>
+      </div>
+      <div className={reverse ? "md:order-1" : ""}>{visual}</div>
+    </section>
+  );
+}
+
+export function ToolPlaceholderLogoSection({
+  eyebrow = "Community",
+  heading,
+  intro,
+  items,
+}: {
+  eyebrow?: string;
+  heading: string;
+  intro: string;
+  items: readonly string[];
+}) {
+  return (
+    <section className="border-t border-[#E1DDD3] py-14 md:py-16">
+      <div className="grid gap-8 rounded-[1.25rem] border border-[#D8D4CA] bg-white p-6 md:grid-cols-[0.8fr_1.2fr] md:p-8">
+        <div>
+          <ToolSectionEyebrow tone="coral">{eyebrow}</ToolSectionEyebrow>
+          <h2 className="mt-3 text-3xl font-semibold leading-tight text-[#111111] md:text-4xl">
+            {heading}
+          </h2>
+          <p className="mt-4 text-base leading-7 text-[#555555]">{intro}</p>
+        </div>
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {items.map((item) => (
+            <div
+              key={item}
+              className="flex h-24 items-center justify-center rounded-[1rem] border border-dashed border-[#D8D4CA] bg-[#FAFAFA] px-4 text-center text-sm font-semibold text-[#555555]"
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}