https://github.com/line64/landricks-components
A set of React components to build structured landing pages
https://github.com/line64/landricks-components
landing-page react react-components
Last synced: 4 days ago
JSON representation
A set of React components to build structured landing pages
- Host: GitHub
- URL: https://github.com/line64/landricks-components
- Owner: line64
- License: mit
- Created: 2016-08-05T15:32:28.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2019-03-28T10:52:00.000Z (about 7 years ago)
- Last Synced: 2026-03-20T00:54:47.601Z (3 months ago)
- Topics: landing-page, react, react-components
- Language: JavaScript
- Size: 1.15 MB
- Stars: 38
- Watchers: 6
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-projects - landricks-components - A set of React components to build structured landing pages ⭐38 `JavaScript` (📦 Legacy & Inactive Projects)
README
# Landricks: Landing-Bricks
A set of React components to build structured landing pages
## Introduction
Have you ever built a product landing page? They are all the same, they have a big banner on top, some call-to-action buttons, a list of features, some quotes from customers, pricing options, etc. Most of the time, these elements are displayed as horizontal bands, laid out vertically. Design varies a lot, but it can often be defined as a result of basic rules (font, primary/secondary color, background) that apply differently to each band.
## Goal
Landricks provide a set of opinionated React DOM-components that can be laid out as bricks, one on top of the other, to easily obtain a fully formatted landing page. The props of each component are used to set the actual content (text, images, urls) presented to the user. Visual design can be defined by providing a "theme", which is a set of high-level properties which are used by each component to build their internal styles.
## Demo
The simplest way to get a glance of the components is to use "react storybook". You can either clone the repo and run `npm run storybook`, or you can browse the online [Storybook Workspace](https://99414fdf-a9e6-4eed-85ce-422542fe1672.sbook.io) which renders directly from the master branch code.
## Getting Started
**Create a React web app**
Use *react-scripts* to create a web app called *quick-landing-page* (if you don't like react-scripts, use whatever procedure you prefer):
npx create-react-app quick-landing-page
cd quick-landing-page
npm start
**Add Landricks dependency**
Inside the dir of your fresh new app, run npm to add the required dependency:
npm install --save landricks-components
**Import components**
Add the following import statement to `src/App.js`:
```
import {
LandingCanvas,
ThemePropagator,
GenericBrick,
DoubleContentBrick,
StrongMessageBrick,
EnumerationBrick,
EmailSqueezeBrick,
FooterBrick,
CallToAction,
FeatureItem,
PlaceHolder
} from 'landricks-components';
```
**Define themes to be used by different bricks**
Add the following constants to your `src/App.js`:
```
const BASE_THEME = {
fontFamily: 'Lato',
baseFontSize: '18px'
}
const HEADER_BAND_THEME = {
...BASE_THEME,
baseFontSize: '18px',
backgroundColor: '#71A2B6',
textColor: '#FFFFFF',
primaryColor: '#FFFFFF',
primaryContrastColor: '#71A2B6',
objectDesign: 'square-solid'
}
const HEAVY_BAND_THEME = {
...BASE_THEME,
backgroundColor: '#29D9C2',
textColor: '#FFFFFF',
primaryColor: '#FFFFFF',
primaryContrastColor: '#000000',
secondaryColor: '#C99DA3',
objectDesign: 'square-outline'
};
const LIGHT_BAND_THEME = {
...BASE_THEME,
backgroundColor: '#FAFAFA',
textColor: '#888888',
primaryColor: '#996888',
secondaryColor: '#C99DA3'
};
```
**Add a LandingCanvas component**
Replace the current render method of `src/App.js` for this one:
```
render() {
return (
);
}
```
**Add some Bricks to the canvas**
Add these components as children of the `LandingCanvas`:
```
}
/>
Our product highlight
you wont find a better product anywhere in the universe.
```
**Run your app**
Use npm start script to start your app:
npm start