Multi-language landing pages without refactoring (the Pendro i18n walkthrough)

If you've ever shipped a multi-language site the hard way, the part that bit you wasn't the translation. It was the fan-out: a separate URL tree per language, manual `hreflang` tagging, blog posts that had to be hand-recreated in each locale, search engines confused about which page to rank in which region. By the time you were done, you'd rebuilt half the site.

Pendro's i18n model collapses all of that into a switch. Enable a locale, AI-translate the content, optionally tune the copy per language, publish. The renderer handles URL fan-out, `hreflang` emission, sitemap per locale, and per-locale SEO overrides without you touching any of it.

What gets translated

Pendro splits content into two tiers for i18n:

• Per-section content: Every section's copy (hero headline, services, about, FAQ, etc.) gets a per-locale override slot. When the slot is empty, the renderer falls back to the default-locale content.

• Per-blog-post content: Each blog post can be translated as a whole — title, excerpt, body, SEO copy, and (if you want) the URL slug. A French version of "Why we built this" can live at `/fr/blog/pourquoi-nous-construisons-ceci`, not just `/fr/blog/why-we-built-this`.

Step-by-step: turning a single-language site into a 3-language site

1. Enable the locales

Open Project → Settings → Languages. Click + Add language. Pick your locale codes — e.g. `fr` (French) and `es` (Spanish) on top of the default `en`. Save.

Nothing visible changes yet — your site still serves English at the bare URL. But the renderer now knows it has three active locales and will start emitting `hreflang` alternates pointing at URLs that don't exist yet.

2. AI-translate the home page

In the editor, switch the locale picker (top of the sidebar) to French. The editor shows you the same sections, but with empty fr-locale overrides. Click AI translate from English. Pendro sends each section's copy through Claude with a "translate to fr-FR" instruction and writes the result back into the fr overrides.

The translations land in ~10-20 seconds. Skim them. Machine translation is usually 90% right; the 10% that needs a human touch is where idioms, brand voice, or industry jargon comes in.

3. Override per-locale slugs + SEO copy

Some pages benefit from a hand-tuned locale-specific URL. Your French Privacy page should probably live at `/fr/confidentialite`, not `/fr/privacy`. Pendro's per-locale slug override is one field in the page's settings — type the localised slug, save, the renderer wires it up.

Same for SEO title + description. The default behaviour is "use the translated section copy"; the override lets you write a hand-crafted French SEO title that's shorter or punchier than the literal translation.

4. AI-translate the blog

On the blog index, every published post shows a Translations column. Click into a post → Translate to French. Claude translates the title, excerpt, body, and SEO copy. The slug stays in English by default; click the slug field to translate that too if you want.

The translated post becomes a separate row under the same project, scoped to the `fr` locale. Visitors at `/fr/blog/...` see the French version; visitors at `/blog/...` continue to see the English original.

5. Header language switcher

The clean-business template ships a `<LanguageSwitcher>` header component that auto-appears when a project has more than one active locale. It reads the current path and constructs URLs to the same page in every other locale. No configuration.

What the renderer emits

Once a multi-locale project publishes, every rendered page carries:

• Per-locale URLs: `/` for default, `/fr/`, `/es/` for non-default locales.

• hreflang alternates: Every page has `<link rel="alternate" hreflang="<code>" href="...">` for every active locale. Plus `<link rel="alternate" hreflang="x-default" href="https://yoursite.com/">` pointing at the default-locale root.

• Per-locale sitemaps: The `sitemap.xml` includes every page × every locale, with proper `<xhtml:link>` annotations.

• Locale-specific canonical URL: Each rendered page declares its own canonical, not a single shared one. Search engines collapse the variants correctly.

Staggered launches (advanced)

Per-locale publish timestamps unlock a useful pattern: launch a marketing campaign in one region before another. You can ship the French version on March 1 and the Spanish version on March 15 — both are written, both are translated, both are queued, but only the French one is visible until March 15.

The mechanism: each locale carries its own `publishedAt` field on the project's `published_at_by_locale` column. A scheduled-publish cron checks every 15 minutes for locales whose publish time has passed and flips them live.

A note on machine translation

AI translation is genuinely good now — but it's not perfect. The most common issues we see in production:

• "Privacy Policy" translated literally as "Politique de Vie Privée" in French. The natural French translation is just "Confidentialité".

• CTAs translated word-for-word that lose their punchy feel in the target language. "Get a free quote" → "Obtenez un devis gratuit" is fine but flat; a real French marketer would write "Demandez un devis".

• Industry-specific terms (legal, medical) that need a domain expert.

Our recommendation: AI-translate to a complete first draft, then have a native speaker pass through the hero, primary CTAs, and SEO titles. Those three things matter most for conversion; everything else can stay machine-translated and still rank fine.