@tomako/tools-runtime 0.1.0

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

@@ -0,0 +1,83 @@
+import type {
+    ProductPosterChannel,
+    ProductPosterGenerationResult,
+    ProductPosterGeneratorInput,
+    ProductPosterScene
+} from "../../../../lib/tools/product-poster-generator-schema";
+
+export type FormState = Omit<
+  ProductPosterGeneratorInput,
+  | "screenshotNames"
+  | "logoName"
+  | "logoReferenceImageUrl"
+  | "screenshotReferenceImageUrls"
+  | "referenceImageUrls"
+> & {
+  screenshotNames: string[];
+  screenshotDataUrls: string[];
+  logoName?: string;
+  logoDataUrl?: string;
+};
+
+export type ResultState =
+  | { phase: "idle" }
+  | { phase: "submitting" }
+  | { phase: "polling"; taskId: string; status: string }
+  | {
+      phase: "error";
+      kind: ErrorKind;
+      field?: FieldErrorKey;
+      taskId?: string;
+      message: string;
+    }
+  | { phase: "ready"; data: GeneratedPoster };
+
+export type ErrorKind = "input" | "submit" | "task" | "result" | "schema" | "timeout";
+
+export type FieldErrorKey =
+  | "productName"
+  | "productContext"
+  | "audience"
+  | "primaryCta"
+  | "productUrl";
+
+export type FieldErrors = Partial<Record<FieldErrorKey, string>>;
+
+export type PosterIntentId =
+  | "websiteConversion"
+  | "websiteFeature"
+  | "socialLaunch"
+  | "socialContent"
+  | "paidAcquisition"
+  | "paidRetargeting"
+  | "productHuntLaunch"
+  | "ogBlogCover";
+
+export type PosterIntentOption = {
+  id: PosterIntentId;
+  targetScene: ProductPosterScene;
+  channel: ProductPosterChannel;
+};
+
+export type BrandColorPresetId = "auto" | "tomako" | "ocean" | "violet" | "mono" | "sunset";
+
+export type BrandColorPreset = {
+  id: BrandColorPresetId;
+  value: string;
+  colors: readonly string[];
+};
+
+export type GeneratedPoster = {
+  taskId: string;
+  imageTaskId: string;
+  imageUrl: string;
+  width: number;
+  height: number;
+  fileBaseName: string;
+  settingsSummary: string;
+  summary?: string;
+  reviewChecklist: string[];
+  limitations: string[];
+  assets?: ProductPosterGenerationResult["assets"];
+  screenshotCount: number;
+};

package/src/features/tools/product-ui-generator/product-ui-generator.container.tsx

@@ -0,0 +1,116 @@
+import { createToolGuideTranslator } from "../shared/tool-message-translator";
+
+import { ProductUiGenerator } from "./widget";
+
+import {
+    ToolCardGrid,
+    ToolFaqSection,
+    ToolSection,
+    ToolTextRows,
+    type ToolFaqItem,
+    type ToolTextCard,
+} from "../shared/tool-content-sections";
+import { ToolCta } from "../shared/tool-cta";
+import { ToolImageVisual, ToolWorkspaceSection } from "../shared/tool-guide-section";
+import { ToolPageShell } from "../shared/tool-page-shell";
+import type { ToolPageProps } from "../types";
+
+export async function ProductUiGeneratorContainer({ locale, spec }: ToolPageProps) {
+  const t = await createToolGuideTranslator(locale, "toolsPages.productUiGenerator.guide");
+  const outputItems = t.raw("outputItems") as readonly ToolTextCard[];
+  const standardItems = t.raw("standardItems") as readonly ToolTextCard[];
+  const exportBullets = t.raw("exportBullets") as readonly string[];
+  const scopeBullets = t.raw("scopeBullets") as readonly string[];
+  const useCaseItems = t.raw("useCaseItems") as readonly ToolTextCard[];
+  const faqItems = t.raw("faqItems") as readonly ToolFaqItem[];
+
+  return (
+    <ToolPageShell
+      locale={locale}
+      spec={spec}
+      heroVariant="immersive"
+      heroBackgroundImage={spec.seo.ogImage}
+      heroBackgroundAlt={t("visualAlt.hero")}
+    >
+      <ToolWorkspaceSection
+        heading={t("workspaceHeading")}
+        hint={t("workspaceHint")}
+        badge={t("workspaceBadge")}
+      >
+        <ProductUiGenerator />
+      </ToolWorkspaceSection>
+
+      <ToolSection heading={t("outputs")}>
+        <ToolCardGrid items={outputItems} columns="four" />
+      </ToolSection>
+
+      <ToolSection
+        heading={t("exportHeading")}
+        intro={t("exportBody")}
+        visual={
+          <ToolImageVisual
+            src="/tools/product-ui-generator-export.webp"
+            alt={t("visualAlt.export")}
+          />
+        }
+      >
+        <ul className="space-y-3 text-base leading-7 text-[#3D3D3D]">
+          {exportBullets.map((item) => (
+            <li key={item} className="rounded-[1rem] border border-[#E1DDD3] bg-white px-4 py-3">
+              {item}
+            </li>
+          ))}
+        </ul>
+      </ToolSection>
+
+      <ToolSection heading={t("standardHeading")}>
+        <ToolCardGrid items={standardItems} columns="four" />
+      </ToolSection>
+
+      <ToolSection
+        heading={t("scopeHeading")}
+        intro={t("scopeBody")}
+        visual={
+          <ToolImageVisual
+            src="/tools/product-ui-generator-scope.webp"
+            alt={t("visualAlt.scope")}
+          />
+        }
+        reverse
+      >
+        <ul className="space-y-3 text-base leading-7 text-[#3D3D3D]">
+          {scopeBullets.map((item) => (
+            <li key={item} className="rounded-[1rem] border border-[#E1DDD3] bg-white px-4 py-3">
+              {item}
+            </li>
+          ))}
+        </ul>
+      </ToolSection>
+
+      <ToolSection
+        heading={t("useCaseHeading")}
+        intro={t("useCaseBody")}
+        visual={
+          <ToolImageVisual
+            src="/tools/product-ui-generator-use-case.webp"
+            alt={t("visualAlt.useCase")}
+          />
+        }
+      >
+        <ToolTextRows items={t.raw("useCaseBullets") as readonly string[]} />
+      </ToolSection>
+
+      <ToolSection heading={t("useCases")}>
+        <ToolCardGrid items={useCaseItems} columns="four" />
+      </ToolSection>
+
+      <ToolFaqSection heading={t("faq")} items={faqItems} />
+
+      <ToolCta
+        hint={t("ctaHint")}
+        primary={{ href: "/tools/commercial-bp-generator", label: t("ctaPrimary") }}
+        secondary={{ href: "/tools", label: t("ctaSecondary") }}
+      />
+    </ToolPageShell>
+  );
+}

package/src/features/tools/product-ui-generator/product-ui-generator.spec.ts

@@ -0,0 +1,14 @@
+import type { ToolSpec } from "../types";
+
+export const productUiGeneratorSpec: ToolSpec = {
+  slug: "product-ui-generator",
+  toolType: "generator",
+  seo: {
+    "publishedAt": "2026-07-02",
+    "updatedAt": "2026-07-02",
+    "readingTime": "7 min",
+    "featured": false,
+    "ogImage": "/tools/product-ui-generator-hero.webp"
+  },
+  widget: {"id":"product-ui-generator","mode":"custom"},
+};

package/src/features/tools/product-ui-generator/widget/constants.ts

@@ -0,0 +1,18 @@
+import type { ProductUiInput } from "../../../../lib/tools/product-ui-generator-schema";
+
+export const defaultForm: ProductUiInput = {
+  productName: "",
+  idea: "",
+  targetUsers: "",
+  coreScenario: "",
+  platform: "mixed",
+  tone: "premium",
+  language: "zh",
+  mustInclude: "",
+  mustAvoid: "",
+};
+
+export const TASK_MAX_ATTEMPTS = 80;
+export const RESULT_MISSING_MAX_ATTEMPTS = 10;
+export const TASK_POLL_MS = 1600;
+export const RESULT_POLL_MS = 2400;

package/src/features/tools/product-ui-generator/widget/helpers.ts

@@ -0,0 +1,11 @@
+
+export function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => window.setTimeout(resolve, ms));
+}
+
+export function localizeError(message: string, labels: Record<string, string>): string {
+  if (message.includes("24") || message === "Invalid input") return labels.ideaMin;
+  if (message.includes("placeholder")) return labels.placeholder;
+  if (message.includes("audience")) return labels.audience;
+  return message;
+}

package/src/features/tools/product-ui-generator/widget/index.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+export const ProductUiGenerator = dynamic(() =>
+  import("./product-ui-generator").then((module) => module.ProductUiGenerator),
+);

package/src/features/tools/product-ui-generator/widget/preview-panels.tsx

@@ -0,0 +1,73 @@
+"use client";
+import {
+    type ProductUiResult
+} from "../../../../lib/tools/product-ui-generator-schema";
+import {
+    AlertTriangle,
+    Loader2
+} from "lucide-react";
+import type { GeneratorState } from "./types";
+
+export function ResultStatus({ state, labels }: { state: GeneratorState; labels: Record<string, string> }) {
+  if (state.phase === "idle") return null;
+
+  if (state.phase === "loading") {
+    return (
+      <section className="rounded-[1.5rem] border border-[#D8D4CA] bg-white p-7 text-center shadow-[0_18px_48px_rgba(17,17,17,0.06)]">
+        <Loader2 className="mx-auto size-8 animate-spin text-[#111111]" />
+        <h3 className="mt-4 text-2xl font-semibold text-[#111111]">{labels.loadingTitle}</h3>
+        <p className="mx-auto mt-2 max-w-xl text-sm leading-6 text-[#555555]">
+          {labels.loadingBody}
+        </p>
+        <p className="mt-4 text-xs font-semibold uppercase text-[#777777]">{state.status}</p>
+      </section>
+    );
+  }
+
+  if (state.phase === "error") {
+    return (
+      <section className="rounded-[1.5rem] border border-[#F2B7A7] bg-[#FFF6F1] p-7 text-center">
+        <AlertTriangle className="mx-auto size-8 text-[#A83A24]" />
+        <h3 className="mt-4 text-2xl font-semibold text-[#111111]">{labels.errorTitle}</h3>
+        <p className="mx-auto mt-2 max-w-xl text-sm leading-6 text-[#6A3A2C]">{state.message}</p>
+      </section>
+    );
+  }
+
+  return null;
+}
+
+export function ScreenCard({
+  screen,
+  index,
+}: {
+  screen: ProductUiResult["screens"][number];
+  index: number;
+}) {
+  return (
+    <article className="grid min-w-0 gap-5 rounded-[1.35rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_18px_44px_rgba(17,17,17,0.06)] lg:grid-cols-[0.72fr_1fr]">
+      <div className="min-w-0">
+        <p className="text-xs font-semibold uppercase text-[#A54D32]">
+          Screen {String(index + 1).padStart(2, "0")} · {screen.platform}
+        </p>
+        <h3 className="mt-3 text-2xl font-semibold leading-tight text-[#111111]">
+          {screen.title}
+        </h3>
+        <p className="mt-3 text-sm leading-6 text-[#555555]">{screen.purpose}</p>
+      </div>
+      <div className="min-w-0 rounded-[1rem] bg-[#F7F6F2] p-4">
+        <p className="text-sm font-semibold text-[#111111]">Layout</p>
+        <p className="mt-2 text-sm leading-6 text-[#555555]">{screen.layout}</p>
+        <p className="mt-4 text-sm font-semibold text-[#111111]">Visual direction</p>
+        <p className="mt-2 text-sm leading-6 text-[#555555]">{screen.visualDirection}</p>
+        <ul className="mt-4 grid gap-2 text-sm leading-6 text-[#3D3D3D]">
+          {screen.keyInteractions.map((item) => (
+            <li key={item} className="rounded-xl bg-white px-3 py-2">
+              {item}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </article>
+  );
+}

package/src/features/tools/product-ui-generator/widget/product-ui-generator.tsx

@@ -0,0 +1,304 @@
+"use client";
+import { Button } from "@tomako/ui/button";
+import { Field, Input, Textarea } from "@tomako/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@tomako/ui/select";
+import { useLocale, useTranslations } from "../../../../i18n/client";
+import { ApiError } from "../../../../lib/api/errors";
+import {
+    PRODUCT_UI_LANGUAGES,
+    PRODUCT_UI_PLATFORMS,
+    PRODUCT_UI_TONES,
+    productUiInputSchema,
+    type ProductUiInput,
+    type ProductUiLanguage,
+    type ProductUiPlatform,
+    type ProductUiTone
+} from "../../../../lib/tools/product-ui-generator-schema";
+import { cn } from "@tomako/ui/cn";
+import {
+    fetchProductUiGenerationTask,
+    streamTaskEvents,
+    submitProductUiGeneration,
+} from "../../../../host/client";
+import {
+    CheckCircle2,
+    Sparkles
+} from "lucide-react";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import { defaultForm, RESULT_MISSING_MAX_ATTEMPTS, RESULT_POLL_MS, TASK_MAX_ATTEMPTS, TASK_POLL_MS } from "./constants";
+import { localizeError, wait } from "./helpers";
+import { ResultStatus } from "./preview-panels";
+import { ResultView } from "./result-shell";
+import type { FieldErrors, GeneratorState } from "./types";
+
+export function ProductUiGenerator() {
+  const t = useTranslations("toolsPages.productUiGenerator.widget");
+  const locale = useLocale();
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const firstErrorRef = useRef<HTMLTextAreaElement | null>(null);
+  const [form, setForm] = useState<ProductUiInput>(defaultForm);
+  const [errors, setErrors] = useState<FieldErrors>({});
+  const [state, setState] = useState<GeneratorState>({ phase: "idle" });
+
+  const platformLabels = t.raw("platforms") as Record<ProductUiPlatform, string>;
+  const toneLabels = t.raw("tones") as Record<ProductUiTone, string>;
+  const languageLabels = t.raw("languages") as Record<ProductUiLanguage, string>;
+  const errorLabels = t.raw("errorLabels") as Record<string, string>;
+  const resultLabels = t.raw("resultLabels") as Record<string, string>;
+  const activeTaskId = state.phase === "loading" ? state.taskId : undefined;
+
+  useEffect(() => {
+    if (!activeTaskId) return;
+    const taskId = activeTaskId;
+
+    let cancelled = false;
+    let missingAttempts = 0;
+
+    async function resolveTask(final = false) {
+      for (let attempt = 0; attempt < TASK_MAX_ATTEMPTS && !cancelled; attempt += 1) {
+        const task = await fetchProductUiGenerationTask(taskId);
+        if (cancelled) return;
+        if (task.data) {
+          setState({ phase: "done", data: task.data });
+          return;
+        }
+        if (task.status === "FAILED" || task.status === "RESULT_INVALID") {
+          setState({ phase: "error", message: task.error || t("errors.resultInvalid") });
+          return;
+        }
+        if (task.status === "AWAITING_RESULT") {
+          missingAttempts += 1;
+          if (final && missingAttempts >= RESULT_MISSING_MAX_ATTEMPTS) {
+            setState({ phase: "error", message: t("errors.timeout") });
+            return;
+          }
+          setState({ phase: "loading", status: t("status.awaitingResult"), taskId });
+          await wait(RESULT_POLL_MS);
+        } else {
+          setState({ phase: "loading", status: task.status || t("status.running"), taskId });
+          await wait(TASK_POLL_MS);
+        }
+      }
+      if (!cancelled) setState({ phase: "error", message: t("errors.timeout") });
+    }
+
+    const es = streamTaskEvents(taskId, {
+      onStatus: (status: string) => setState({ phase: "loading", status, taskId }),
+      onResult: () => void resolveTask(false),
+      onDone: () => void resolveTask(true),
+      onFailure: (_status: string, message: string) => {
+        cancelled = true;
+        setState({ phase: "error", message: message || t("errors.resultInvalid") });
+      },
+      onError: () => {},
+    });
+
+    void resolveTask(false);
+
+    return () => {
+      cancelled = true;
+      es.close();
+    };
+  }, [activeTaskId, t]);
+
+  useEffect(() => {
+    if (state.phase === "done" || state.phase === "loading") {
+      resultRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }, [state.phase]);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const parsed = productUiInputSchema.safeParse(form);
+    if (!parsed.success) {
+      const nextErrors: FieldErrors = {};
+      for (const issue of parsed.error.issues) {
+        const key = issue.path[0] as keyof ProductUiInput | undefined;
+        if (key) nextErrors[key] = localizeError(issue.message, errorLabels);
+      }
+      setErrors(nextErrors);
+      window.setTimeout(() => firstErrorRef.current?.focus(), 20);
+      return;
+    }
+
+    setErrors({});
+    setState({ phase: "loading", status: t("status.submitting") });
+    try {
+      const task = await submitProductUiGeneration(parsed.data, locale);
+      setState({ phase: "loading", status: t("status.running"), taskId: task.taskId });
+    } catch (error) {
+      const message =
+        error instanceof ApiError ? error.message : error instanceof Error ? error.message : t("errors.submit");
+      setState({ phase: "error", message });
+    }
+  }
+
+  return (
+    <div className="space-y-10">
+      <div className="grid gap-7 lg:grid-cols-[minmax(0,0.82fr)_minmax(360px,1fr)] lg:items-stretch">
+        <form
+          onSubmit={handleSubmit}
+          className="min-w-0 rounded-[1.75rem] border border-[#D8D4CA] bg-white p-5 shadow-[0_18px_48px_rgba(17,17,17,0.06)] md:p-6"
+        >
+          <div className="mb-5">
+            <h3 className="text-2xl font-semibold text-[#111111]">{t("formTitle")}</h3>
+            <p className="mt-2 text-sm leading-6 text-[#555555]">{t("formHint")}</p>
+          </div>
+
+          <div className="grid gap-4">
+            <Field label={t("productNameLabel")} error={errors.productName}>
+              <Input
+                value={form.productName}
+                onChange={(event) => setForm((current) => ({ ...current, productName: event.target.value }))}
+                placeholder={t("productNamePlaceholder")}
+                className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px]"
+                aria-invalid={Boolean(errors.productName)}
+              />
+            </Field>
+            <Field label={t("ideaLabel")} error={errors.idea}>
+              <Textarea
+                ref={firstErrorRef}
+                value={form.idea}
+                onChange={(event) => setForm((current) => ({ ...current, idea: event.target.value }))}
+                placeholder={t("ideaPlaceholder")}
+                className="min-h-36 rounded-2xl border-[#CFC9BC] bg-white text-[15px]"
+                aria-invalid={Boolean(errors.idea)}
+              />
+            </Field>
+            <div className="grid gap-4 md:grid-cols-2">
+              <Field label={t("targetUsersLabel")} error={errors.targetUsers}>
+                <Input
+                  value={form.targetUsers}
+                  onChange={(event) => setForm((current) => ({ ...current, targetUsers: event.target.value }))}
+                  placeholder={t("targetUsersPlaceholder")}
+                  className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px]"
+                  aria-invalid={Boolean(errors.targetUsers)}
+                />
+              </Field>
+              <Field label={t("coreScenarioLabel")} error={errors.coreScenario}>
+                <Input
+                  value={form.coreScenario}
+                  onChange={(event) => setForm((current) => ({ ...current, coreScenario: event.target.value }))}
+                  placeholder={t("coreScenarioPlaceholder")}
+                  className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px]"
+                  aria-invalid={Boolean(errors.coreScenario)}
+                />
+              </Field>
+            </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              <Field label={t("platformLabel")}>
+                <Select value={form.platform} onValueChange={(value) => setForm((current) => ({ ...current, platform: value as ProductUiPlatform }))}>
+                  <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PRODUCT_UI_PLATFORMS.map((item) => (
+                      <SelectItem key={item} value={item}>
+                        {platformLabels[item]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label={t("toneLabel")}>
+                <Select value={form.tone} onValueChange={(value) => setForm((current) => ({ ...current, tone: value as ProductUiTone }))}>
+                  <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PRODUCT_UI_TONES.map((item) => (
+                      <SelectItem key={item} value={item}>
+                        {toneLabels[item]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field label={t("languageLabel")}>
+                <Select value={form.language} onValueChange={(value) => setForm((current) => ({ ...current, language: value as ProductUiLanguage }))}>
+                  <SelectTrigger className="h-12 rounded-2xl border-[#CFC9BC] bg-white text-[15px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {PRODUCT_UI_LANGUAGES.map((item) => (
+                      <SelectItem key={item} value={item}>
+                        {languageLabels[item]}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </Field>
+            </div>
+            <div className="grid gap-4 md:grid-cols-2">
+              <Field label={t("mustIncludeLabel")} error={errors.mustInclude}>
+                <Textarea
+                  value={form.mustInclude}
+                  onChange={(event) => setForm((current) => ({ ...current, mustInclude: event.target.value }))}
+                  placeholder={t("mustIncludePlaceholder")}
+                  className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white text-[15px]"
+                  aria-invalid={Boolean(errors.mustInclude)}
+                />
+              </Field>
+              <Field label={t("mustAvoidLabel")} error={errors.mustAvoid}>
+                <Textarea
+                  value={form.mustAvoid}
+                  onChange={(event) => setForm((current) => ({ ...current, mustAvoid: event.target.value }))}
+                  placeholder={t("mustAvoidPlaceholder")}
+                  className="min-h-24 rounded-2xl border-[#CFC9BC] bg-white text-[15px]"
+                  aria-invalid={Boolean(errors.mustAvoid)}
+                />
+              </Field>
+            </div>
+            <Button
+              type="submit"
+              disabled={state.phase === "loading"}
+              className="h-12 w-full rounded-2xl bg-[#111111] text-base font-semibold text-white hover:bg-[#2A2A2A]"
+            >
+              {state.phase === "loading" ? t("generating") : t("submit")}
+            </Button>
+          </div>
+        </form>
+
+        <figure className="relative min-h-[520px] overflow-hidden rounded-[1.75rem] border border-[#D8D4CA] bg-[#EDE8DD]">
+          <Image
+            src="/tools/product-ui-generator-workspace.webp"
+            alt={t("workspaceAlt")}
+            fill
+            priority
+            sizes="(min-width: 1024px) 640px, 100vw"
+            className="object-cover"
+          />
+          <figcaption className="absolute bottom-5 left-5 right-5 rounded-[1.25rem] bg-white/86 p-4 text-sm leading-6 text-[#3D3D3D] backdrop-blur">
+            <Sparkles className="mb-2 size-5 text-[#A54D32]" />
+            {t("workspaceCaption")}
+          </figcaption>
+        </figure>
+      </div>
+
+      <div ref={resultRef} className={cn(state.phase === "idle" && "hidden")}>
+        <ResultStatus state={state} labels={resultLabels} />
+        {state.phase === "done" ? (
+          <div className="mt-7">
+            <ResultView result={state.data} labels={resultLabels} />
+          </div>
+        ) : null}
+      </div>
+
+      <div className="grid gap-3 md:grid-cols-3">
+        {(t.raw("trustNotes") as string[]).map((item) => (
+          <div key={item} className="rounded-[1rem] border border-[#D8D4CA] bg-white px-4 py-3 text-sm leading-6 text-[#555555]">
+            <CheckCircle2 className="mb-2 size-4 text-[#A54D32]" />
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}