Welcome to Redocly's Landing Page Gallery! In addition to Markdown pages, the following Redocly products allow you to build custom pages with React: Realm, Revel, and Reef.
This repository contains a collection of example landing pages built using React and related tooling. The examples are designed to help you learn how to create custom React pages in your documentation.
The gallery has the following example pages available:
| Screenshot | Description |
|---|---|
|
A sleek, modern landing page for a SaaS product. Features a full-width hero with CTA, highlighted features, full-width quote, pricing plans, and email subscription. Tools: React, styled-components |
|
An example landing page built for training and onboarding. Features hero with gradient background and responsive content cards with icons. Tools: React, styled-components |
Follow these steps to run the development server and preview the landing pages:
-
Clone the repo:
git clone https://github.com/Redocly/landing-page-gallery.git
-
Navigate to the project folder.
-
Install project dependencies:
npm install. -
Start the development server:
npm run start(ornpx @redocly/cli@latest preview) -
Click the Preview URL in the console to open project in browser.
Each landing page is self-contained in its own folder, including any components or resources needed for that page.
Dependencies are managed from the central package.json file.
Contributions to the Landing page gallery are quite welcome. Follow these steps if you'd like to add a new example or improve an existing one:
-
Fork the repo
-
Create new branch for your changes
-
Make your changes and follow the project structure
-
Submit a pull request with description of your changes or additions
-
If adding a new page, add thumbnail and description to
README.md
We'd like to expand the gallery with new and useful examples. If there's a specific page or React-based tool you'd like an example of, please open an issue using our issue template.
We'll review issues and consider adding them in the future.