docs: vendor the documentation site into the monorepo

Fold the standalone 3x-ui-docs project (Next.js 16 + Fumadocs, deployed to
docs.sanaei.dev) into docs/ so the panel and its documentation share a single
source of truth, the way sing-box keeps its docs in-tree. The old repo becomes
redundant and can be retired.

- Import the full site under docs/ (app, components, content, lib, public,
  scripts, config). The self-contained pnpm project sits alongside the existing
  engineering notes with no filename collisions.
- Re-point "Edit on GitHub" links from MHSanaei/3x-ui-docs to this repo's
  docs/content/docs path (docs/lib/shared.ts, docs/app/.../page.tsx).
- Add docs-ci.yml and docs-deploy.yml under .github/workflows/, scoped to
  docs/** and run with working-directory: docs, since GitHub only runs
  workflows from the repo-root .github/. deploy-static.yml's GitHub Pages
  publish (CNAME docs.sanaei.dev) carries over unchanged.

Follow-up (outside this commit): attach the docs.sanaei.dev custom domain to
this repository's Pages (or set the Vercel project's root directory to docs),
confirm the site is live from the monorepo, then delete MHSanaei/3x-ui-docs.

docs/components/home/features.tsx

@@ -0,0 +1,49 @@
+import {
+  Boxes,
+  Network,
+  Send,
+  ShieldCheck,
+  TerminalSquare,
+  Users,
+  type LucideIcon,
+} from 'lucide-react';
+
+// Icons map by position to the localized feature items in lib/site-i18n.ts
+// (Every major protocol, REALITY, Clients, Multi-node, Telegram, Self-hosted).
+const ICONS: LucideIcon[] = [Boxes, ShieldCheck, Users, Network, Send, TerminalSquare];
+
+export function Features({
+  heading,
+  subtitle,
+  items,
+}: {
+  heading: string;
+  subtitle: string;
+  items: { title: string; description: string }[];
+}) {
+  return (
+    <section className="mx-auto w-full max-w-6xl px-4 py-16 sm:py-24">
+      <div className="mx-auto max-w-2xl text-center">
+        <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{heading}</h2>
+        <p className="mt-3 text-fd-muted-foreground">{subtitle}</p>
+      </div>
+      <div className="mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {items.map(({ title, description }, i) => {
+          const Icon = ICONS[i] ?? Boxes;
+          return (
+            <div
+              key={title}
+              className="rounded-2xl border bg-fd-card p-6 transition-colors hover:border-fd-primary/40"
+            >
+              <div className="inline-flex size-11 items-center justify-center rounded-xl bg-brand/10 text-brand">
+                <Icon className="size-6" aria-hidden />
+              </div>
+              <h3 className="mt-4 font-semibold">{title}</h3>
+              <p className="mt-2 text-sm text-fd-muted-foreground">{description}</p>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

docs/components/home/github-stats.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { GitFork, Star, Tag } from 'lucide-react';
+import { fetchGitHubStats, formatCount, type GitHubStats } from '@/lib/github-stats';
+
+/**
+ * Stars / forks / latest-release row. Renders the build-time numbers
+ * immediately (no layout shift, works without JS), then swaps in live ones
+ * from the GitHub API after hydration.
+ */
+export function GitHubStatsRow({
+  initial,
+  labels,
+}: {
+  initial: GitHubStats;
+  labels: { stars: string; forks: string; latest: string };
+}) {
+  const [stats, setStats] = useState(initial);
+
+  useEffect(() => {
+    let cancelled = false;
+    // Plain fetch, no custom headers — keeps the request preflight-free.
+    void fetchGitHubStats().then((live) => {
+      if (cancelled || !live) return;
+      setStats((prev) => ({ ...live, latestVersion: live.latestVersion || prev.latestVersion }));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return (
+    <dl className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-sm">
+      <Stat icon={<Star className="size-4" aria-hidden />} label={labels.stars}>
+        {formatCount(stats.stars)}
+      </Stat>
+      <Stat icon={<GitFork className="size-4" aria-hidden />} label={labels.forks}>
+        {formatCount(stats.forks)}
+      </Stat>
+      <Stat icon={<Tag className="size-4" aria-hidden />} label={labels.latest}>
+        {stats.latestVersion}
+      </Stat>
+    </dl>
+  );
+}
+
+function Stat({
+  icon,
+  label,
+  children,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="inline-flex items-center gap-2">
+      <span className="text-brand">{icon}</span>
+      <dt className="sr-only">{label}</dt>
+      <dd>
+        <span className="font-semibold">{children}</span>{' '}
+        <span className="text-fd-muted-foreground">{label}</span>
+      </dd>
+    </div>
+  );
+}

docs/components/home/install-command.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { cn } from '@/lib/cn';
+
+export function InstallCommand({
+  command,
+  className,
+  copyLabel = 'Copy install command',
+  copiedLabel = 'Copied',
+}: {
+  command: string;
+  className?: string;
+  copyLabel?: string;
+  copiedLabel?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Clipboard unavailable (insecure context) — silently ignore.
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-3 rounded-xl border bg-fd-card py-2.5 pe-2 ps-4 text-sm shadow-sm',
+        className,
+      )}
+    >
+      <span className="select-none font-mono text-fd-muted-foreground">$</span>
+      {/* Commands are always LTR, even on RTL pages. */}
+      <code dir="ltr" className="flex-1 overflow-x-auto whitespace-nowrap text-start font-mono">
+        {command}
+      </code>
+      <button
+        type="button"
+        onClick={copy}
+        aria-label={copied ? copiedLabel : copyLabel}
+        className="inline-flex size-8 shrink-0 items-center justify-center rounded-lg text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground focus-visible:outline-2 focus-visible:outline-fd-ring"
+      >
+        {copied ? (
+          <Check className="size-4 text-brand" aria-hidden />
+        ) : (
+          <Copy className="size-4" aria-hidden />
+        )}
+      </button>
+    </div>
+  );
+}

docs/components/home/language-switcher.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import { Languages } from 'lucide-react';
+import { i18n, locales } from '@/lib/i18n';
+import { cn } from '@/lib/cn';
+
+// Home-navbar language switcher.
+//
+// fumadocs' built-in popover switcher (`LanguageSelect`) has its item clicks
+// swallowed when it is nested inside HomeLayout's Radix `NavigationMenu` — the
+// dropdown opens but selecting a locale never fires `onChange`/`router.push`.
+// The docs sidebar isn't wrapped in a NavigationMenu, so the built-in one works
+// there and is kept. Here we use a native `<details>` toggle + real `<Link>`
+// anchors, which navigate reliably inside the navbar (like the other nav links).
+//
+// The home navbar only renders on the landing page, so the targets are simply
+// each locale's home (`/`, `/fa`, `/ru`, `/zh`).
+export function HomeLanguageSwitcher({ current }: { current: string }) {
+  return (
+    <details className="group relative [&>summary::-webkit-details-marker]:hidden">
+      <summary
+        aria-label="Choose a language"
+        className="flex cursor-pointer list-none items-center rounded-lg p-1.5 text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground group-open:bg-fd-accent"
+      >
+        <Languages className="size-5" />
+      </summary>
+      <div className="absolute end-0 z-50 mt-1.5 flex min-w-40 flex-col gap-0.5 rounded-lg border bg-fd-popover p-1 text-fd-popover-foreground shadow-lg">
+        <p className="p-2 text-xs font-medium text-fd-muted-foreground">Choose a language</p>
+        {locales.map(({ locale, name }) => (
+          <Link
+            key={locale}
+            href={locale === i18n.defaultLanguage ? '/' : `/${locale}`}
+            className={cn(
+              'rounded-md px-2 py-1.5 text-start text-sm transition-colors',
+              locale === current
+                ? 'bg-fd-primary/10 text-fd-primary'
+                : 'text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
+            )}
+          >
+            {name}
+          </Link>
+        ))}
+      </div>
+    </details>
+  );
+}