Configure the landing page

Define localized hero copy, calls to action, feature summaries, optional media, and the agent section.

Configure the built-in home page under ginkoDocs.landing. Start with the promise, one primary action, and the shortest proof a new reader needs.

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      title: {
        en: "Build with Acme.",
        de: "Mit Acme entwickeln.",
      },
      description: {
        en: "Install the SDK, authenticate, and make your first request.",
        de: "SDK installieren, authentifizieren und die erste Anfrage senden.",
      },
      primary: {
        label: { en: "Get started", de: "Erste Schritte" },
        to: {
          en: "/docs/getting-started",
          de: "/de/dokumentation/erste-schritte",
        },
      },
      secondary: {
        label: { en: "View on GitHub", de: "Auf GitHub ansehen" },
        to: {
          en: "https://github.com/acme/sdk",
          de: "https://github.com/acme/sdk",
        },
      },
      install: {
        command: "pnpm add @acme/sdk",
      },
    },
  },
});

The install command is a copyable line under the hero actions. Omit secondary or install when they do not add useful information.

Add hero media

Use an image for a product screenshot:

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      hero: {
        media: {
          type: "image",
          src: "/screenshots/dashboard.png",
          alt: "Acme dashboard showing a successful deployment",
        },
      },
    },
  },
});

Use code when the first successful command is more useful than a screenshot:

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      hero: {
        media: {
          type: "code",
          filename: "server/api/projects.get.ts",
          language: "ts",
          code: `export default defineEventHandler(() => {
  return { projects: [] }
})`,
        },
      },
    },
  },
});

For several examples, set type: 'code-tabs' and provide tabs. Each tab accepts a localized label, optional icon, filename, language, and code.

Add feature summaries

Feature cards are short landing-page claims, not a second documentation index:

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      features: [
        {
          title: { en: "Typed client", de: "Typisierter Client" },
          description: {
            en: "Generate request and response types from one schema.",
            de: "Anfrage- und Antworttypen aus einem Schema generieren.",
          },
          icon: "lucide:braces",
        },
        {
          title: { en: "Local development", de: "Lokale Entwicklung" },
          description: {
            en: "Run the complete API without a hosted dependency.",
            de: "Die vollständige API ohne gehostete Abhängigkeit ausführen.",
          },
          icon: "lucide:laptop",
        },
      ],
    },
  },
});

Add the agent band and closing action

landing.agent renders a dark full-width band with localized copy and a terminal transcript. Lines beginning with $ render as commands, and lines beginning with # render as comments. landing.cta adds the final action; its primary link falls back to landing.primary when omitted.

app/app.config.ts

export default defineAppConfig({
  ginkoDocs: {
    landing: {
      agent: {
        title: { en: "Readable by agents", de: "Für Agenten lesbar" },
        description: {
          en: "Use the same published Markdown without a separate export.",
          de: "Dasselbe veröffentlichte Markdown ohne separaten Export verwenden.",
        },
        code: "$ curl https://docs.example.com/llms.txt\n# Acme Docs",
      },
      cta: {
        title: { en: "Make the first request.", de: "Die erste Anfrage senden." },
      },
    },
  },
});

When the built-in composition no longer fits the product, replace app/pages/index.vue. Keep app.config.ts for shared site identity rather than forcing page-specific state into the global configuration.