new-landing-page

name	new-landing-page
description	Scaffold a new landing site page following i18n patterns (shared component + EN/VI wrappers + translation keys)

New Landing Page Scaffolder

Create a new page for the Astro landing site at landing/ with proper i18n support.

Usage

The user will provide:

• name: The page name/slug (e.g., "changelog", "features")
• title: Page title for <title> tag
• description: What the page is about
• translatable: Whether it needs EN + VI versions (default: yes)

What Gets Created

For translatable pages (default)

1. Shared page component: landing/src/components/pages/{Name}Page.astro
2. EN page wrapper: landing/src/pages/{name}.astro
3. VI page wrapper: landing/src/pages/vi/{name}.astro
4. Translation keys: Added to both EN and VI sections in landing/src/i18n/ui.ts

For EN-only pages (translatable: false)

1. Page file: landing/src/pages/{name}.astro
2. No translation keys needed — content can be hardcoded or from content collection

Shared Page Component Pattern

---
import BaseLayout from "../../layouts/BaseLayout.astro";
import { useTranslations, useTranslatedPath } from "../../i18n/utils";
import type { Lang } from "../../i18n/utils";

interface Props {
  lang: Lang;
}

const { lang } = Astro.props;
const t = useTranslations(lang);
const tp = useTranslatedPath(lang);

const hreflang = [
  { lang: "en", href: "/{name}" },
  { lang: "vi", href: "/vi/{name}" },
];
---

<BaseLayout title={`${t("{name}.title")} | 3AT - Endless Paradox`} lang={lang} hreflang={hreflang}>
  <div class="container">
    <!-- Page content using t() for all text -->
  </div>
</BaseLayout>

<style>
  /* Scoped styles only — use CSS variables from global.css */
</style>

Thin Wrapper Pattern

---
// landing/src/pages/{name}.astro (EN)
import {Name}Page from "../components/pages/{Name}Page.astro";
---

<{Name}Page lang="en" />

---
// landing/src/pages/vi/{name}.astro (VI)
import {Name}Page from "../../components/pages/{Name}Page.astro";
---

<{Name}Page lang="vi" />

Translation Keys Pattern

Add to landing/src/i18n/ui.ts in BOTH en and vi sections:

// In en section:
"{name}.title": "Page Title",
"{name}.subtitle": "Page subtitle text",

// In vi section:
"{name}.title": "Tiêu đề trang",
"{name}.subtitle": "Mô tả phụ đề trang",

Rules

1. Always use t() for user-facing text — never hardcode strings
2. Always add keys to BOTH EN and VI in ui.ts
3. Use scoped <style> — never add to global.css
4. Use CSS variables from global.css: var(--accent), var(--bg-primary), var(--text-secondary), etc.
5. Include hreflang tags in the shared component for SEO
6. Pass lang to all child components that accept it
7. Use useTranslatedPath() for all internal links
8. If the page needs nav/footer links, update Navbar.astro and Footer.astro with translated entries

Checklist

After scaffolding, verify:

• Shared component exists in components/pages/
• EN wrapper exists in pages/
• VI wrapper exists in pages/vi/
• All translation keys added to both EN and VI in ui.ts
• npm run build passes in landing/ directory
• New routes appear in build output