Explainer Page

ExplainerPage

The shell shared by pages such as /what-is-cardano, /how-cardano-works, /smart-contracts and /defi. It wraps Layout and renders the meta title and description, the FAQPage JSON-LD (when a faq is passed), the Open Graph tags, the SiteHero banner, a zoom background holding the page sections, the FAQ, and an optional dark call-to-action band. Pages pass already translated strings, the shell itself never calls translate().

Because it renders a full page, there is no live preview here, only the usage pattern.

Basic Usage

import ExplainerPage from '@site/src/components/Layout/ExplainerPage';
import { translate } from '@docusaurus/Translate';

export default function MyExplainerPage() {
  const faq = getMyExplainerFAQ();
  return (
    <ExplainerPage
      title={translate({ id: 'myPage.meta.title', message: 'Page Title' })}
      description={translate({ id: 'myPage.meta.description', message: 'Page description for search engines.' })}
      hero={{
        title: translate({ id: 'myPage.hero.title', message: 'Hero title' }),
        description: translate({ id: 'myPage.hero.description', message: 'Hero description' }),
        bannerType: 'starburst',
      }}
      faq={faq}
      cta={{
        title: translate({ id: 'myPage.cta.title', message: 'Ready to go further?' }),
        buttonLabel: translate({ id: 'myPage.cta.button', message: 'Take the quiz' }),
        buttonLink: '/quiz',
      }}
    >
      <MyFirstSection />
      <MySecondSection />
    </ExplainerPage>
  );
}

Props

Prop	Type	Default	Description
title	string	-	Page title, passed to Layout and used for meta and the browser tab.
description	string	-	Meta description, passed to Layout.
hero	{ title, description, bannerType }	required	Strings and banner for the SiteHero at the top of the page. The component does not fail without it, but the page then has no hero title, so always pass it. bannerType takes the same banner names as SiteHero (starburst, waves, braidBlue, fluidBlue, and so on).
faq	Array<{ question, answer }>	-	Optional. When passed, renders the FAQPage JSON-LD in Head and a FAQSection below the children. Omit it on pages without an FAQ.
cta	{ title, buttonLabel, buttonLink }	-	Optional. When passed, renders a CtaOneColumn in a dark background band after the main content. Omit it on pages without a closing call to action.
pageName	string	-	Optional, the OG image name under static/img/og, defaults to the site image.
children	ReactNode	-	The page's own sections, rendered inside the zoom background before the FAQ.