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.

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):

create-react-app quick-landing-page

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,
  MainTitleBrick,
  AppTitleBrick,
  FeatureListBrick
} from 'landricks-components';

Add a LandingCanvas component

Replace the current render method of src/App.js for this one:

render() {
  return (
    <LandingCanvas>
    </LandingCanvas>
  );
}

Add some Bricks to the canvas

Add these components as children of the LandingCanvas:

<AppTitleBrick
  title="The best mobile app of all times!"
  subtitle="An app so revolutionary, that it will blow your mind away and make you forget about all other apps in your phone."
  bandStyle="A"
/>
<FeatureListBrick
  title="My App Features"
  subtitle="Batteries not included"
  bandStyle="C"
  features={[
    { key: 1, title: 'virtual reality', description: 'fancy tech titles to get your attention'},
    { key: 2, title: 'big data', description: 'fancy tech titles to get your attention'},
    { key: 3, title: 'internet of things', description: 'fancy tech titles to get your attention'}
  ]}
/>
<FeatureListBrick
  title="More Features"
  subtitle="Just to show a different band style"
  bandStyle="B"
  features={[
    { key: 1, title: 'no more ideas', description: 'enough dummy text, using ctrl+c from this point on'},
    { key: 2, title: 'no more ideas', description: 'enough dummy text, using ctrl+c from this point on'},
    { key: 3, title: 'no more ideas', description: 'enough dummy text, using ctrl+c from this point on'},
    { key: 4, title: 'no more ideas', description: 'enough dummy text, using ctrl+c from this point on'},
    { key: 5, title: 'no more ideas', description: 'enough dummy text, using ctrl+c from this point on'},
    { key: 6, title: 'no more ideas', description: 'enough dummy text, using ctrl+c from this point on'},
  ]}
/>
<MainTitleBrick
  title="It's time to click my button!"
  subtitle="Now that you've read everything you need to know, make my conversion funnel happy and click this CTA"
  bandStyle="A"
  cta={{ text: 'get it now!' }}
/>

Run your app

Use npm start script to start your app:

npm start

nicoecheza/landricks-components

Landricks: Landing-Bricks

Introduction

Goal

Getting Started