A ready-made, customizable landing page for your developer portal. It comes in three variants covering the most common layouts: a centered hero, a two-column split hero, and a compact documentation hub.

Use it as the element of a custom page — typically your home page:

zudoku.config.tsx
import { LandingPage } from "zudoku/components";

const config = {
  navigation: [
    {
      type: "custom-page",
      path: "/",
      element: (
        <LandingPage
          title="Build with our API"
          description="Everything you need to integrate in minutes."
          actions={[
            { label: "Get started", href: "/getting-started" },
            { label: "API Reference", href: "/api" },
          ]}
        />
      ),
    },
    // ...
  ],
};

Import

Code
import { LandingPage } from "zudoku/components";

Variants

Hero (default)

A centered hero with call-to-action buttons and an optional feature grid below. The classic landing page for product-focused portals. The previews on this page are presented in a Browser Window component.

Code
<LandingPage
  eyebrow="Developer Platform"
  title="Build with our API"
  description="Everything you need to integrate payments, webhooks, and more — in minutes, not days."
  actions={[
    { label: "Get started", href: "/getting-started" },
    { label: "API Reference", href: "/api", variant: "outline" },
  ]}
  features={[
    {
      icon: <ZapIcon />,
      title: "Fast integration",
      description: "Go from zero to your first API call in under five minutes.",
    },
    {
      icon: <KeyIcon />,
      title: "API keys built in",
      description: "Issue, rotate, and revoke keys right from the portal.",
    },
    {
      icon: <WebhookIcon />,
      title: "Webhooks",
      description: "Subscribe to events and react to changes in real time.",
    },
  ]}
/>

Split

A two-column hero with your own content on the side — an illustration, screenshot, or code sample passed via the aside prop. A great fit for developer-oriented portals that want to show code up front.

curl https://api.example.com/v1/shipments \
  -H "Authorization: Bearer $API_KEY" \
  -d destination="alpha-centauri"

Code
<LandingPage
  variant="split"
  eyebrow="Shipping API"
  title="Ship anywhere in the whole universe"
  description="Create and manage shipments, track packages in real-time, and integrate with multiple carriers through a single interface."
  actions={[
    { label: "Get started", href: "/getting-started" },
    {
      label: "View on GitHub",
      href: "https://github.com/zuplo/zudoku",
      variant: "outline",
    },
  ]}
  aside={
    <div className="rounded-xl border bg-card p-4 font-mono text-sm">
      <pre>{`curl https://api.example.com/v1/shipments \\
  -H "Authorization: Bearer $API_KEY" \\
  -d destination="alpha-centauri"`}</pre>
    </div>
  }
/>

The aside accepts any React node — use an <img /> for an illustration instead of code:

Code
<LandingPage
  variant="split"
  title="Ship anywhere"
  aside={<img src="/hero.webp" alt="Hero" className="rounded-3xl" />}
/>

Grid

A compact header followed by prominent, clickable feature cards. Ideal as a documentation hub that routes visitors to the right section quickly.

Code
<LandingPage
  variant="grid"
  title="Documentation"
  description="Explore guides, API references, and examples to get the most out of the platform."
  features={[
    {
      icon: <RocketIcon />,
      title: "Getting Started",
      description: "Set up your account and make your first request.",
      href: "/getting-started",
    },
    {
      icon: <BookOpenIcon />,
      title: "Guides",
      description: "Step-by-step tutorials for common use cases.",
      href: "/guides",
    },
    {
      icon: <CodeIcon />,
      title: "API Reference",
      description: "Complete reference for every endpoint and type.",
      href: "/api",
    },
    {
      icon: <WebhookIcon />,
      title: "Webhooks",
      description: "Listen to events and build real-time integrations.",
      href: "/webhooks",
    },
  ]}
/>

Props

Links

href values in actions and features are rendered as client-side router links for internal paths (e.g. /getting-started) and as regular links opening in a new tab for external URLs (e.g. https://github.com/...).

Customization

• Buttons: The first action defaults to the primary button style, all following actions to outline. Override per action with variant (any Button variant).
• Rich titles: title, description, and eyebrow accept any React node, so you can use custom markup like highlighted words: title={<>Ship <span className="text-primary">faster</span></>}.
• Extra sections: Pass children to append your own sections (testimonials, pricing, …) below the built-in layout.
• Page metadata: Combine with the Head component to set the page title:

Code
import { Head, LandingPage } from "zudoku/components";

<LandingPage title="Build with our API">
  <Head>
    <title>Home</title>
  </Head>
</LandingPage>;