@tomako/tools-runtime 0.1.0

package/src/features/tools/product-agreement-generator/widget/result-shell.tsx

@@ -0,0 +1,473 @@
+"use client";
+
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import { Tabs, TabsList, TabsTrigger } from "@tomako/ui/tabs";
+import { useTranslations } from "../../../../i18n/client";
+import {
+    PRODUCT_AGREEMENT_DATA_CATEGORIES,
+    PRODUCT_AGREEMENT_FEATURES,
+    type ProductAgreementAgentDocument,
+    type ProductAgreementAgentResult,
+} from "../../../../lib/tools/product-agreement-generator-schema";
+import {
+    AlertTriangle,
+    CheckCircle2,
+    Cloud,
+    Copy,
+    Download,
+    Loader2,
+    MessageSquare,
+    Send,
+    Sparkles,
+} from "lucide-react";
+import type { RefObject } from "react";
+
+import { supplementModuleOrder } from "./constants";
+import { DisclosureList, DocumentButton, MultiSelectMenu } from "./form-controls";
+import { formatStatus } from "./helpers";
+import type {
+    ChatMessage,
+    FormCopy,
+    FormState,
+    GenerationState,
+    ModuleCopy,
+    SupplementModule,
+} from "./types";
+
+export function ResultShell({
+  resultSectionRef,
+  state,
+  result,
+  activeDocument,
+  form,
+  copy,
+  supplementModules,
+  revisionExamples,
+  valueJoiner,
+  activeSupplement,
+  setActiveSupplement,
+  setActiveDocumentIndex,
+  agentInstruction,
+  setAgentInstruction,
+  chatMessages,
+  copied,
+  isRevising,
+  canRevise,
+  t,
+  update,
+  generateWithAgent,
+  reviseWithAgent,
+  copyResult,
+  downloadResult,
+  moduleInstruction,
+}: {
+  resultSectionRef: RefObject<HTMLElement | null>;
+  state: GenerationState;
+  result: ProductAgreementAgentResult | null;
+  activeDocument: ProductAgreementAgentDocument | null;
+  form: FormState;
+  copy: FormCopy;
+  supplementModules: ModuleCopy;
+  revisionExamples: readonly string[];
+  valueJoiner: string;
+  activeSupplement: SupplementModule;
+  setActiveSupplement: (value: SupplementModule) => void;
+  setActiveDocumentIndex: (index: number) => void;
+  agentInstruction: string;
+  setAgentInstruction: (value: string) => void;
+  chatMessages: ChatMessage[];
+  copied: boolean;
+  isRevising: boolean;
+  canRevise: boolean;
+  t: ReturnType<typeof useTranslations>;
+  update: <K extends keyof FormState>(key: K, value: FormState[K]) => void;
+  generateWithAgent: () => void;
+  reviseWithAgent: (instruction: string) => void;
+  copyResult: () => void;
+  downloadResult: () => void;
+  moduleInstruction: (module: SupplementModule) => string;
+}) {
+  if (state.phase === "idle" && !result) return null;
+
+  return (
+        <section
+          ref={resultSectionRef}
+          className="rounded-[1.75rem] border border-[#D8D4CA] bg-[#F4F5ED] p-5 md:p-7"
+        >
+          {state.phase === "loading" && !result ? (
+            <div className="flex min-h-[520px] flex-col justify-center rounded-[1.5rem] border border-[#D8D4CA] bg-white p-7 text-center">
+              <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-[#111111] text-white">
+                <Loader2 aria-hidden className="size-6 animate-spin" />
+              </div>
+              <h3 className="mt-5 text-2xl font-semibold leading-tight text-[#111111]">
+                {t("loadingTitle")}
+              </h3>
+              <p className="mx-auto mt-3 max-w-lg text-sm leading-6 text-[#555555]">
+                {t("loadingHint")}
+              </p>
+              <p className="mt-4 text-xs font-semibold uppercase text-[#777777]">
+                {state.taskId ? `${state.taskId} · ` : ""}
+                {formatStatus(state.status)}
+              </p>
+            </div>
+          ) : null}
+
+          {state.phase === "error" && !result ? (
+            <div className="flex min-h-[520px] flex-col justify-center rounded-[1.5rem] border border-[#FFD2C2] bg-[#FFF4EC] p-7 text-center">
+              <div className="mx-auto flex size-14 items-center justify-center rounded-full bg-[#FF5A2E] text-white">
+                <AlertTriangle aria-hidden className="size-6" />
+              </div>
+              <h3 className="mt-5 text-2xl font-semibold leading-tight text-[#111111]">
+                {t("errorTitle")}
+              </h3>
+              <p className="mx-auto mt-3 max-w-lg text-sm leading-6 text-[#6A382A]">
+                {state.message || t("errors.agent")}
+              </p>
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => void generateWithAgent()}
+                className="mx-auto mt-6 inline-flex min-h-11 items-center gap-2 rounded-full bg-[#111111] px-5 text-sm font-semibold text-white hover:bg-[#111111]"
+              >
+                <Cloud aria-hidden className="size-4" />
+                {t("retryAgent")}
+              </Button>
+            </div>
+          ) : null}
+
+          {result && activeDocument ? (
+            <div className="grid gap-5">
+              <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_14px_34px_rgba(17,17,17,0.08)]">
+                <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+                  <div>
+                    <div className="flex flex-wrap gap-2">
+                      <p className="inline-flex items-center gap-2 rounded-full bg-[#111111] px-3 py-1.5 text-xs font-semibold text-white">
+                        <AlertTriangle aria-hidden className="size-3.5 text-[#B7FF3E]" />
+                        {t("agentResult")}
+                      </p>
+                      {isRevising ? (
+                        <p className="inline-flex items-center gap-2 rounded-full bg-[#B7FF3E] px-3 py-1.5 text-xs font-semibold text-[#111111]">
+                          <Loader2 aria-hidden className="size-3.5 animate-spin" />
+                          {t("revisingStatus")}
+                        </p>
+                      ) : null}
+                    </div>
+                    <h3 className="mt-4 text-2xl font-semibold leading-tight text-[#111111]">
+                      {form.productName || t("resultTitle")}
+                    </h3>
+                    <p className="mt-2 text-sm leading-6 text-[#555555]">{result.summary}</p>
+                    <p className="mt-3 rounded-2xl bg-[#FFF4EC] px-4 py-3 text-sm leading-6 text-[#6A382A]">
+                      {result.disclaimer}
+                    </p>
+                    {state.phase === "error" ? (
+                      <p className="mt-3 rounded-2xl border border-[#FFD2C2] bg-[#FFF4EC] px-4 py-3 text-sm font-semibold leading-6 text-[#8A260F]">
+                        {state.message}
+                      </p>
+                    ) : null}
+                  </div>
+                  <div className="flex shrink-0 gap-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => void copyResult()}
+                      className="inline-flex size-11 items-center justify-center rounded-full border border-[#D8D4CA] bg-white text-[#111111] transition hover:-translate-y-0.5"
+                      aria-label={copied ? t("copied") : t("copyAll")}
+                      title={copied ? t("copied") : t("copyAll")}
+                    >
+                      {copied ? (
+                        <CheckCircle2 aria-hidden className="size-4" />
+                      ) : (
+                        <Copy aria-hidden className="size-4" />
+                      )}
+                    </Button>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      onClick={downloadResult}
+                      className="inline-flex size-11 items-center justify-center rounded-full bg-[#B7FF3E] text-[#111111] transition hover:-translate-y-0.5 hover:bg-[#B7FF3E]"
+                      aria-label={t("downloadAll")}
+                      title={t("downloadAll")}
+                    >
+                      <Download aria-hidden className="size-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              {result.missingInfo.length ? (
+                <div className="rounded-[1.5rem] border border-[#FFD2C2] bg-[#FFF4EC] p-4">
+                  <p className="text-sm font-semibold text-[#111111]">
+                    {t("missingPromptTitle")}
+                  </p>
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {result.missingInfo.slice(0, 6).map((item) => (
+                      <Button
+                        key={item}
+                        type="button"
+                        variant="outline"
+                        onClick={() => {
+                          setActiveSupplement("risk");
+                          setAgentInstruction(item);
+                        }}
+                        className="h-auto whitespace-normal rounded-full border border-[#F1B99E] bg-white px-3 py-2 text-left text-xs font-semibold leading-5 text-[#6A382A] transition hover:border-[#111111] hover:bg-white hover:text-[#111111]"
+                      >
+                        {item}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              ) : null}
+
+              <div className="grid gap-4 xl:grid-cols-[260px_minmax(0,1fr)]">
+                <div className="grid content-start gap-3">
+                  {result.documents.map((document, index) => (
+                    <DocumentButton
+                      key={`${document.type}-${document.title}`}
+                      document={document}
+                      active={activeDocument === document}
+                      onClick={() => setActiveDocumentIndex(index)}
+                    />
+                  ))}
+                </div>
+
+                <article className="max-h-[820px] overflow-auto rounded-[1.5rem] border border-[#D8D4CA] bg-white p-6 shadow-[0_14px_34px_rgba(17,17,17,0.06)]">
+                  <h3 className="text-xl font-semibold leading-tight text-[#111111]">
+                    {activeDocument.title}
+                  </h3>
+                  {activeDocument.summary ? (
+                    <p className="mt-2 text-sm leading-6 text-[#666666]">
+                      {activeDocument.summary}
+                    </p>
+                  ) : null}
+                  <div className="mt-5 whitespace-pre-wrap text-sm leading-7 text-[#3D3D3D]">
+                    {activeDocument.markdown}
+                  </div>
+                </article>
+              </div>
+
+              <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_14px_34px_rgba(17,17,17,0.06)]">
+                <div className="flex items-start gap-3">
+                  <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#B7FF3E] text-[#111111]">
+                    <Sparkles aria-hidden className="size-4" />
+                  </span>
+                  <div>
+                    <h3 className="text-base font-semibold text-[#111111]">
+                      {t("supplement.title")}
+                    </h3>
+                    <p className="mt-1 text-sm leading-6 text-[#555555]">
+                      {t("supplement.hint")}
+                    </p>
+                  </div>
+                </div>
+
+                <Tabs
+                  value={activeSupplement}
+                  onValueChange={(value) => setActiveSupplement(value as SupplementModule)}
+                >
+                  <TabsList className="mt-4 flex h-auto flex-wrap justify-start gap-2 rounded-none border-0 bg-transparent p-0">
+                    {supplementModuleOrder.map((module) => (
+                      <TabsTrigger
+                        key={module}
+                        value={module}
+                        className="h-auto rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3.5 py-2 text-xs font-semibold text-[#555555] shadow-none transition hover:border-[#111111] data-[state=active]:border-[#B7FF3E] data-[state=active]:bg-[#F1FFD9] data-[state=active]:text-[#111111] data-[state=active]:shadow-none"
+                      >
+                        {supplementModules[module].label}
+                      </TabsTrigger>
+                    ))}
+                  </TabsList>
+                </Tabs>
+
+                <p className="mt-3 text-xs leading-5 text-[#777777]">
+                  {supplementModules[activeSupplement].hint}
+                </p>
+
+                <div className="mt-5 grid gap-5">
+                  {activeSupplement === "risk" ? (
+                    <>
+                      <MultiSelectMenu
+                        title={t("dataTitle")}
+                        hint={t("dataHint")}
+                        placeholder={t("dataPlaceholder")}
+                        joiner={valueJoiner}
+                        options={PRODUCT_AGREEMENT_DATA_CATEGORIES}
+                        values={form.dataCategories}
+                        labels={copy.dataCategories}
+                        onChange={(values) => update("dataCategories", values)}
+                      />
+
+                      <MultiSelectMenu
+                        title={t("featureTitle")}
+                        hint={t("featureHint")}
+                        placeholder={t("featurePlaceholder")}
+                        joiner={valueJoiner}
+                        options={PRODUCT_AGREEMENT_FEATURES}
+                        values={form.features}
+                        labels={copy.features}
+                        onChange={(values) => update("features", values)}
+                      />
+                    </>
+                  ) : null}
+
+                  {activeSupplement === "publish" ? (
+                    <>
+                      <Field label={t("operatorLabel")} hint={t("optional")}>
+                        <Input
+                          className="h-12 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35"
+                          placeholder={t("operatorPlaceholder")}
+                          value={form.operatorName}
+                          onChange={(event) => update("operatorName", event.target.value)}
+                        />
+                      </Field>
+
+                      <div className="grid gap-4 md:grid-cols-2">
+                        <Field label={t("urlLabel")} hint={t("optional")}>
+                          <Input
+                            className="h-12 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35"
+                            placeholder={t("urlPlaceholder")}
+                            value={form.productUrl}
+                            onChange={(event) => update("productUrl", event.target.value)}
+                          />
+                        </Field>
+                        <Field label={t("contactLabel")} hint={t("optional")}>
+                          <Input
+                            className="h-12 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35"
+                            placeholder={t("contactPlaceholder")}
+                            value={form.contactEmail}
+                            onChange={(event) => update("contactEmail", event.target.value)}
+                          />
+                        </Field>
+                      </div>
+                    </>
+                  ) : null}
+
+                  {activeSupplement === "notes" ? (
+                    <Field label={t("notesLabel")} hint={t("optional")}>
+                      <Textarea
+                        className="min-h-32 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35"
+                        placeholder={t("notesPlaceholder")}
+                        value={form.notes}
+                        onChange={(event) => update("notes", event.target.value)}
+                      />
+                    </Field>
+                  ) : null}
+                </div>
+
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={() => void reviseWithAgent(moduleInstruction(activeSupplement))}
+                  disabled={!canRevise}
+                  className="mt-5 inline-flex min-h-12 items-center gap-2 rounded-full bg-[#111111] px-5 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-[#111111] disabled:pointer-events-none disabled:opacity-55"
+                >
+                  {isRevising ? (
+                    <Loader2 aria-hidden className="size-4 animate-spin" />
+                  ) : (
+                    <Sparkles aria-hidden className="size-4" />
+                  )}
+                  {isRevising ? t("updatingAgent") : t("applySupplement")}
+                </Button>
+              </div>
+
+              <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_14px_34px_rgba(17,17,17,0.06)]">
+                <div className="flex items-start gap-3">
+                  <span className="flex size-10 shrink-0 items-center justify-center rounded-full bg-[#111111] text-white">
+                    <MessageSquare aria-hidden className="size-4" />
+                  </span>
+                  <div>
+                    <h3 className="text-base font-semibold text-[#111111]">
+                      {t("conversation.title")}
+                    </h3>
+                    <p className="mt-1 text-sm leading-6 text-[#555555]">
+                      {t("conversation.hint")}
+                    </p>
+                  </div>
+                </div>
+
+                {chatMessages.length ? (
+                  <div className="mt-4 grid max-h-56 gap-3 overflow-auto rounded-2xl bg-[#F7F6F2] p-3">
+                    {chatMessages.map((message) => (
+                      <p
+                        key={message.id}
+                        className={`rounded-2xl px-4 py-3 text-sm leading-6 ${
+                          message.role === "user"
+                            ? "ml-8 bg-[#111111] text-white"
+                            : message.tone === "error"
+                              ? "mr-8 bg-[#FFF4EC] text-[#8A260F]"
+                              : "mr-8 bg-white text-[#555555]"
+                        }`}
+                      >
+                        {message.content}
+                      </p>
+                    ))}
+                  </div>
+                ) : null}
+
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {revisionExamples.map((example) => (
+                    <Button
+                      key={example}
+                      type="button"
+                      variant="outline"
+                      onClick={() => setAgentInstruction(example)}
+                      className="h-auto whitespace-normal rounded-full border border-[#D8D4CA] bg-[#F7F6F2] px-3 py-2 text-xs font-semibold text-[#555555] transition hover:border-[#111111] hover:bg-white hover:text-[#111111]"
+                    >
+                      {example}
+                    </Button>
+                  ))}
+                </div>
+
+                <div className="mt-4 grid gap-3 md:grid-cols-[1fr_auto]">
+                  <Textarea
+                    className="min-h-24 rounded-2xl border-[#CFC9BC] bg-[#F7F6F2] text-[15px] shadow-none focus-visible:border-[#111111] focus-visible:ring-[#B7FF3E]/35"
+                    placeholder={t("conversation.placeholder")}
+                    value={agentInstruction}
+                    onChange={(event) => setAgentInstruction(event.target.value)}
+                  />
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    onClick={() => void reviseWithAgent(agentInstruction)}
+                    disabled={!canRevise || !agentInstruction.trim()}
+                    className="inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-[#111111] px-5 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-[#111111] disabled:pointer-events-none disabled:opacity-55"
+                  >
+                    {isRevising ? (
+                      <Loader2 aria-hidden className="size-4 animate-spin" />
+                    ) : (
+                      <Send aria-hidden className="size-4" />
+                    )}
+                    {t("conversation.send")}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-5">
+                <h3 className="text-base font-semibold text-[#111111]">{t("checksTitle")}</h3>
+                <p className="mt-1 text-sm leading-6 text-[#555555]">{t("checksHint")}</p>
+                <div className="mt-4 grid gap-3 lg:grid-cols-2">
+                  <DisclosureList
+                    title={t("download.riskHeading")}
+                    items={result.riskFlags.map((flag) => `${flag.label}: ${flag.detail}`)}
+                    tone="warning"
+                  />
+                  <DisclosureList
+                    title={t("download.missingInfoHeading")}
+                    items={result.missingInfo}
+                    tone="warning"
+                  />
+                  <DisclosureList
+                    title={t("download.jurisdictionHeading")}
+                    items={result.jurisdictionNotes}
+                  />
+                  <DisclosureList
+                    title={t("download.reviewHeading")}
+                    items={result.reviewChecklist}
+                  />
+                </div>
+              </div>
+            </div>
+          ) : null}
+        </section>
+
+  );
+}

package/src/features/tools/product-agreement-generator/widget/types.ts

@@ -0,0 +1,89 @@
+import type {
+    ProductAgreementAgentResult,
+    ProductAgreementDataCategory,
+    ProductAgreementDocumentType,
+    ProductAgreementFeature,
+    ProductAgreementProductType,
+    ProductAgreementRegion,
+} from "../../../../lib/tools/product-agreement-generator-schema";
+
+export type FormState = {
+  productName: string;
+  operatorName: string;
+  productUrl: string;
+  contactEmail: string;
+  productDescription: string;
+  productType: ProductAgreementProductType;
+  primaryRegion: ProductAgreementRegion;
+  dataCategories: ProductAgreementDataCategory[];
+  features: ProductAgreementFeature[];
+  documents: ProductAgreementDocumentType[];
+  notes: string;
+};
+
+export type LoadingMode = "initial" | "revision";
+
+export type GenerationState =
+  | { phase: "idle" }
+  | {
+      phase: "loading";
+      status: string;
+      mode: LoadingMode;
+      taskId?: string;
+      previous?: ProductAgreementAgentResult;
+    }
+  | { phase: "done"; data: ProductAgreementAgentResult; taskId?: string }
+  | {
+      phase: "error";
+      message: string;
+      taskId?: string;
+      previous?: ProductAgreementAgentResult;
+    };
+
+export type AgreementTab = "starter" | "privacy" | "commercial";
+
+export type AgreementTabCopy = {
+  label: string;
+};
+
+export type FormCopy = {
+  agreementTabs: Record<AgreementTab, AgreementTabCopy>;
+  productTypes: Record<ProductAgreementProductType, string>;
+  regions: Record<ProductAgreementRegion, string>;
+  dataCategories: Record<ProductAgreementDataCategory, string>;
+  features: Record<ProductAgreementFeature, string>;
+  documentLabels: Record<ProductAgreementDocumentType, string>;
+};
+
+export type ResolveOptions = {
+  final?: boolean;
+  retries?: number;
+  mode?: LoadingMode;
+  previous?: ProductAgreementAgentResult | null;
+  successMessage?: string;
+};
+
+export type SupplementModule = "risk" | "publish" | "notes";
+
+export type ModuleCopy = Record<
+  SupplementModule,
+  {
+    label: string;
+    hint: string;
+  }
+>;
+
+export type PreviewCopy = {
+  beforeTitle: string;
+  afterTitle: string;
+  productFallback: string;
+  briefFallback: string;
+  reviewItems: readonly string[];
+};
+
+export type ChatMessage = {
+  id: string;
+  role: "user" | "agent";
+  content: string;
+  tone?: "normal" | "error";
+};

package/src/features/tools/product-hunt-launch-planner/product-hunt-launch-planner.container.tsx

@@ -0,0 +1,122 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { ProductHuntLaunchPlanner } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolFaqSection,
+    ToolPlainTextGrid,
+    ToolSection,
+    type ToolFaqItem,
+    type ToolTextCard,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import {
+    ToolGuideSection,
+    ToolImageVisual,
+    ToolWorkspaceSection,
+} from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+export async function ProductHuntLaunchPlannerContainer({
+  locale,
+  spec,
+}: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.productHuntLaunchPlanner.guide");
+  const outputItems = t.raw("outputItems") as readonly ToolTextCard[];
+  const supportItems = t.raw("supportItems") as readonly string[];
+  const boundaryItems = t.raw("boundaryItems") as readonly string[];
+  const failureItems = t.raw("failureItems") as readonly string[];
+  const resultUseItems = t.raw("resultUseItems") as readonly string[];
+  const whyTomakoItems = t.raw("whyTomakoItems") as readonly ToolTextCard[];
+  const standardItems = t.raw("standardItems") as readonly string[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+
+  return (
+    <ToolPageShell
+      heroBackgroundAlt={t("heroVisualAlt")}
+      heroBackgroundImage="/tools/product-hunt-launch-planner-hero-generated.webp"
+      heroVariant="immersive"
+      locale={locale}
+      spec={spec}
+    >
+      <ToolWorkspaceSection
+        badge={t("workspaceBadge")}
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+      >
+        <ProductHuntLaunchPlanner />
+      </ToolWorkspaceSection>
+      <ToolSection heading={t("outputs")}>
+        <ToolCardGrid items={outputItems} columns="four" />
+      </ToolSection>
+      <ToolGuideSection
+        heading={t("supportHeading")}
+        visual={
+          <ToolImageVisual
+            alt={t("supportVisualAlt")}
+            src="/tools/product-hunt-launch-planner-value-generated.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={supportItems} />
+      </ToolGuideSection>
+      <ToolGuideSection
+        heading={t("boundaryHeading")}
+        reverse
+        visual={
+          <ToolImageVisual
+            alt={t("boundaryVisualAlt")}
+            src="/tools/product-hunt-launch-planner-boundary-generated.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={boundaryItems} />
+        <h3 className="mt-8 text-xl font-semibold text-[#111111]">
+          {t("failureHeading")}
+        </h3>
+        <ToolPlainTextGrid items={failureItems} />
+      </ToolGuideSection>
+      <ToolGuideSection
+        heading={t("resultUseHeading")}
+        visual={
+          <ToolImageVisual
+            alt={t("resultUseVisualAlt")}
+            src="/tools/product-hunt-launch-planner-use-case-generated.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={resultUseItems} />
+      </ToolGuideSection>
+      <ToolSection heading={t("whyTomakoHeading")}>
+        <ToolCardGrid items={whyTomakoItems} columns="four" />
+      </ToolSection>
+      <ToolGuideSection
+        heading={t("standardHeading")}
+        reverse
+        visual={
+          <ToolImageVisual
+            alt={t("standardVisualAlt")}
+            src="/tools/product-hunt-launch-planner-standard-generated.webp"
+            wide
+          />
+        }
+      >
+        <ToolPlainTextGrid items={standardItems} />
+      </ToolGuideSection>
+      <ToolFaqSection heading={t("faq")} items={faqItems} />
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{
+          href: "/tools/gtm-readiness-checklist",
+          label: t("ctaPrimary"),
+        }}
+        secondary={{ href: "/tools/cold-start-channel-selector", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}