docs: promote /web from develop (live restore progress + PBS encryption UX refresh)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/app/[locale]/docs/backup-restore/destinations/pbs/page.tsx

@@ -169,7 +169,29 @@ export default async function PbsDestinationPage({
       </h3>
 
       <p className="mb-4 text-gray-800 leading-relaxed">
-        {t.rich("encryption.keyfileBody", { code })}
+        {t.rich("encryption.keyfileBody", { code, em })}
+      </p>
+
+      <h3 className="text-lg font-semibold mt-6 mb-3 text-gray-900">
+        {t("encryption.modesTitle")}
+      </h3>
+
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("encryption.modesIntro", { em })}
+      </p>
+
+      <h4 className="text-base font-semibold mt-4 mb-2 text-gray-900">
+        {t("encryption.modesPerHostTitle")}
+      </h4>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("encryption.modesPerHostBody", { code, em })}
+      </p>
+
+      <h4 className="text-base font-semibold mt-4 mb-2 text-gray-900">
+        {t("encryption.modesSharedTitle")}
+      </h4>
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("encryption.modesSharedBody", { code, em })}
       </p>
 
       <h3 className="text-lg font-semibold mt-6 mb-3 text-gray-900">

web/app/[locale]/docs/backup-restore/restoring/page.tsx

@@ -47,6 +47,7 @@ type FileRow = { file: string; content: string }
 type TaskRow = { task: string; detail: string }
 type TimeRow = { stage: string; time: string; detail: string }
 type LogRow = { log: string; detail: string }
+type FieldRow = { name: string; detail: string }
 type WhereNextItem = { label: string; href: string; tail: string }
 
 export default async function RestoringPage({
@@ -66,6 +67,7 @@ export default async function RestoringPage({
       pathClassification: { rows: ClassRow[] }
       pendingMachinery: { rows: FileRow[] }
       postbootDispatcher: { tasks: TaskRow[] }
+      liveProgress: { fields: FieldRow[] }
       tenMinutes: { rows: TimeRow[] }
       logs: { rows: LogRow[] }
       whereNext: { items: WhereNextItem[] }
@@ -78,6 +80,7 @@ export default async function RestoringPage({
   const classRows = rs.pathClassification.rows
   const pendingRows = rs.pendingMachinery.rows
   const postbootTasks = rs.postbootDispatcher.tasks
+  const liveFields = rs.liveProgress.fields
   const timeRows = rs.tenMinutes.rows
   const logRows = rs.logs.rows
   const whereNextItems = rs.whereNext.items
@@ -321,6 +324,79 @@ export default async function RestoringPage({
         </figcaption>
       </figure>
 
+      <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">
+        {t("liveProgress.heading")}
+      </h2>
+
+      <p className="mb-4 text-gray-800 leading-relaxed">
+        {t.rich("liveProgress.body", { code })}
+      </p>
+
+      <div className="overflow-x-auto mb-6">
+        <table className="w-full text-sm border border-gray-200 rounded-md">
+          <thead className="bg-gray-50 text-gray-900">
+            <tr>
+              <th className="text-left px-3 py-2 border-b border-gray-200 whitespace-nowrap">Card element</th>
+              <th className="text-left px-3 py-2 border-b border-gray-200">Detail</th>
+            </tr>
+          </thead>
+          <tbody className="text-gray-800">
+            {liveFields.map((row, idx) => (
+              <tr key={row.name} className={idx < liveFields.length - 1 ? "border-b border-gray-100" : ""}>
+                <td className="px-3 py-2 align-top whitespace-nowrap"><strong>{row.name}</strong></td>
+                <td className="px-3 py-2 align-top">{t.rich(`liveProgress.fields.${idx}.detail`, { code, em })}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <p className="mb-6 text-gray-800 leading-relaxed">
+        {t.rich("liveProgress.dismissBody", { code, em })}
+      </p>
+
+      <figure className="my-6">
+        <a
+          href="/images/docs/backup-restore/monitor-restore-progress-card.png"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block cursor-zoom-in group"
+          aria-label={t("liveProgress.imageAlt")}
+        >
+          <Image
+            src="/images/docs/backup-restore/monitor-restore-progress-card.png"
+            alt={t("liveProgress.imageAlt")}
+            width={1600}
+            height={800}
+            className="rounded-lg border border-gray-200 shadow-sm w-full h-auto transition group-hover:shadow-md"
+          />
+        </a>
+        <figcaption className="text-sm text-gray-500 mt-2 text-center italic">
+          {t("liveProgress.imageCaption")}
+        </figcaption>
+      </figure>
+
+      <figure className="my-6">
+        <a
+          href="/images/docs/backup-restore/monitor-restore-progress-details.png"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block cursor-zoom-in group"
+          aria-label={t("liveProgress.detailsImageAlt")}
+        >
+          <Image
+            src="/images/docs/backup-restore/monitor-restore-progress-details.png"
+            alt={t("liveProgress.detailsImageAlt")}
+            width={1600}
+            height={1200}
+            className="rounded-lg border border-gray-200 shadow-sm w-full h-auto transition group-hover:shadow-md"
+          />
+        </a>
+        <figcaption className="text-sm text-gray-500 mt-2 text-center italic">
+          {t("liveProgress.detailsImageCaption")}
+        </figcaption>
+      </figure>
+
       <h2 className="text-2xl font-semibold mt-10 mb-4 text-gray-900">
         {t("tenMinutes.heading")}
       </h2>