<commit_before># 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,
      BannerTitleBrick,
      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."
    />
    <FeatureListBrick
      title="My App Features"
      subtitle="Batteries not included"
      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"
      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'},
      ]}
    />
    <BannerTitleBrick
      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"
    />
    <FooterBrick
      bandStyle="Footer"
      productName="Product Name"
      logo={ require('./images/ProductImg.png') }
      copyRight={ true } 
      social={[
        { key: 1, icon: 'facebook', link: 'http://wwww.facebook.com' },
        { key: 2, icon: 'instagram', link: 'http://wwww.instagram.com' },
        { key: 3, icon: 'twitter', link: 'http://wwww.twitter.com' }
      ]}
    />

**Run your app**

Use npm start script to start your app:

    npm start<commit_msg>Improve readme with new component naming<commit_after># 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,
      TitleBrick,
      FeatureListBrick,
      FooterBrick
    } 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:

    <TitleBrick
      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."
    />
    <FeatureListBrick
      title="My App Features"
      subtitle="Batteries not included"
      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"
      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'},
      ]}
    />
    <TitleBrick
      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"
    />
    <FooterBrick
      productName="Product Name"
      logo={ require('./images/ProductImg.png') }
      copyRight={ true }
      social={[
        { key: 1, icon: 'facebook', link: 'http://wwww.facebook.com' },
        { key: 2, icon: 'instagram', link: 'http://wwww.instagram.com' },
        { key: 3, icon: 'twitter', link: 'http://wwww.twitter.com' }
      ]}
    />

**Run your app**

Use npm start script to start your app:

    npm start
{'fraction_non_alphanumeric': 0.09275106972061414, 'fraction_numerical': 0.003020387616410773, 'mean_word_length': 3.222635494155154, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1384956', 'n_tokens_mistral': 2206, 'n_tokens_neox': 2112, 'n_words': 1027}