{"componentChunkName":"component---src-templates-simple-markdown-js","path":"/developer-portal/home-page/","matchPath":"","result":{"data":{"markdownRemark":{"html":"

Home page

\n

Usually, the home page is something fancy.

\n

However, it can be a plain markdown file.

\n

Plain markdown home page

\n

To make a plain markdown home page, create a file named index.md in your root directory.

\n

It will take precedence over the index.mdx.

\n

You may need to hard refresh the home page to see it.

\n

Add sidebar to home page

\n

To add the sidebar to the home page, you must add the home page to the sidebar.

\n

Open sidebars.yaml and add a link to \"Home\".

\n
\n
\n
Copy
\n
Copied
\n
\n 
training:\n  - page: index.md\n    label: Home
\n
\n

Now, change remove that link and delete your index.md file.

\n

MDX pages

\n

MDX allows using React components within markdown files with the file extension .mdx.

\n

Open the index.mdx file and spend a few minutes reviewing the structure.

\n

If you do want the sidebar navigation with the MDX file, be sure you remove or comment this line, or you will see two top nav bars.

\n
\n
`, `72981431275608056000`)\"\n >\n
Copy
\n
Copied
\n
\n 
  <NavBar location={props.location} standalone={false} />
\n
\n

Change Jumbotron text

\n

Let's change the Jumbotron text within the H1 and H2 header components.

\n
\n
\n \n

NXTsoft Developer Portal

\n

The OmniPlatform provides secure open APIs.

`, `9513401891062979000`)\"\n >\n
Copy
\n
Copied
\n
\n 
<Jumbotron>\n  <NavBar location={props.location} standalone={false} />\n  <H1>NXTsoft Developer Portal</H1>\n  <H2>The OmniPlatform provides secure open APIs.</H2>
\n
\n

Next, let's change the buttons.\nThere is one button enabled.\nLet's enable another button.

\n
\n
\n \n `, `40184232793556450000`)\"\n >\n
Copy
\n
Copied
\n
\n 
  <Flex p={20} justifyContent=\"center\">\n    <Button inversed large to=\"https://app.redoc.ly\">\n      Redocly app\n    </Button>\n    <Button inversed transparent large to=\"developer-portal/index.md\">\n      Get started\n    </Button>
\n
\n

You'll notice the inversed, transparent, large, and to properties on some of those buttons.

\n

Each component has specific properties available to toggle on/off, or to supply with specific values which controls the look or behavior of the component.\nMore on that topic in our component library documentation.

\n

Components and custom components can be used to make fancy fancy pages (limited only by the creativity of your designs).

\n

Add Jumbotron in the middle of the page

\n

Now, we would like to see what a second Jumbotron would look like in the middle of the page.\nWe want to call out some tutorials we've worked hard on, and think that would be a good way to do it.

\n

We will start by copying the existing Jumbotron code and edit the H1 and H2 according to our preferences.

\n
\n
\n \n

Tutorials

\n

Get setup faster...

\n \n {/* */}\n \n {/* */}\n \n`, `28749814215704285000`)\"\n >\n
Copy
\n
Copied
\n
\n 
<Jumbotron>\n  <NavBar location={props.location} standalone={false} />\n  <H1>Tutorials</H1>\n  <H2>Get setup faster...</H2>\n  <Flex p={20} justifyContent=\"center\">\n    {/* <Button inversed large to=\"https://app.redoc.ly\">\n      Redocly app\n    </Button> */}\n    <Button inversed transparent large to=\"developer-portal/index.md\">\n      Get started\n    </Button>\n    {/* <Button inversed transparent large>\n      Workflows\n    </Button> */}\n  </Flex>\n</Jumbotron>
\n
\n

Next, we don't want that navbar or the buttons on this jumbotron, so we delete those.

\n
\n
\n

Tutorials

\n

Get setup faster...

\n`, `30282192060976288000`)\"\n >\n
Copy
\n
Copied
\n
\n 
<Jumbotron>\n  <H1>Tutorials</H1>\n  <H2>Get setup faster...</H2>\n</Jumbotron>
\n
\n

We'll paste that right above the section header.

\n
\n
\n

Tutorials

\n

Get setup faster...

\n \n \n Need help? \n Try our training exercises.\n `, `68207891774453250000`)\"\n >\n
Copy
\n
Copied
\n
\n 
  <Jumbotron>\n    <H1>Tutorials</H1>\n    <H2>Get setup faster...</H2>\n  </Jumbotron>\n  <SectionHeader>\n    <Emphasis>Need help? </Emphasis>\n    Try our training exercises.\n  </SectionHeader>
\n
\n

Now, we'll try to modify the style of the Jumbotron further.

\n

The component has various properties that can be adjusted including.

\n

Here is an excerpt of properties available.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescription
bgColorBackground color
bgImageBackground image
parallaxEffectBoolean value to enable parallax effect
\n

After experimenting, we end up with.

\n
\n
\n

Tutorials

\n

Get setup faster...

\n `, `14917955042953478000`)\"\n >\n
Copy
\n
Copied
\n
\n 
  <Jumbotron parallaxEffect bgImage={icon1}>\n    <H1>Tutorials</H1>\n    <H2>Get setup faster...</H2>\n  </Jumbotron>
\n
\n

Notice the usage of the {icon1} as the image is imported near the top of the file.

\n

Try to import a different image and use that as the bgImage.

\n

MDX is not limited to the home page.\nUse it for any page where you want extended usage of React components.

","headings":[{"value":"Home page","depth":1},{"value":"Plain markdown home page","depth":2},{"value":"Add sidebar to home page","depth":2},{"value":"MDX pages","depth":2},{"value":"Change Jumbotron text","depth":3},{"value":"Add Jumbotron in the middle of the page","depth":3}]},"contentItem":{"data":{"lastModified":"2025-12-17T21:55:39.000Z","enableToc":null,"disableLastModified":null,"tocMaxDepth":null,"requestLogin":false}},"siteConfig":{"enableToc":true,"disableLastModified":false,"tocMaxDepth":4}},"pageContext":{"matchPath":"","id":"a896f086-0bec-57b2-ba4f-22a0bf7e2bdf__redocly content/developer-portal/home-page/","seo":{"title":"Home page","description":null,"image":"","keywords":null,"jsonLd":null,"lang":null},"pageId":"developer-portal/home-page.md","pageBaseUrl":"/developer-portal/home-page","type":"markdown","toc":{"enable":true,"maxDepth":4,"headings":[{"depth":1,"value":"Home page","id":"home-page"},{"depth":2,"value":"Plain markdown home page","id":"plain-markdown-home-page"},{"depth":2,"value":"Add sidebar to home page","id":"add-sidebar-to-home-page"},{"depth":2,"value":"MDX pages","id":"mdx-pages"},{"depth":3,"value":"Change Jumbotron text","id":"change-jumbotron-text"},{"depth":3,"value":"Add Jumbotron in the middle of the page","id":"add-jumbotron-in-the-middle-of-the-page"}]},"data":{"title":""},"catalogInfo":null,"link":"/developer-portal/home-page/","sidebarName":"","isLanding":false,"showPrevButton":null,"showNextButton":null,"apiVersions":null,"apiVersionId":null,"isDefaultApiVersion":null}},"staticQueryHashes":["1123603147","1180902673","1302185487","1344209882","1398840060","1520077861","1975142765","2667623876","2950305614","3743992808","561138138"]}