Mirror of a land page kit for Chakra UI https://github.com/remorses/landing-blocks
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bump-version 1b7d65787d Landing-blocks Version 1.0.59 [skip ci] 1 week ago
.github/workflows .github/workflows/landing-blocks: deploy every time 3 months ago
.vscode Initial commit 6 months ago
landing-blocks Landing-blocks Version 1.0.59 [skip ci] 1 week ago
website website/pages/index: 1 month ago
.gitattributes Initial commit 6 months ago
.gitignore changed button props type 4 months ago
CHANGELOG.md Landing-blocks Version 1.0.59 [skip ci] 1 week ago
README.md readme: update 5 months ago
now.json ok fast refresh and zeit now 4 months ago
package.json better button 3 months ago
yarn.lock up 1 month ago

README.md




Landing pages building blocks

See some landing pages built with landing-blocks


landing-blocks is an npm package that groups together many useful components that can be composed together to create beautiful landing pages.

Install

yarn add landing-blocks

Usage

Every component represents a section of your landing page, compose them together to get the perfect landing page.

import React from 'react'
import {
    LandingProvider,
    Hero,
    Heading,
    NavBar,
    Button,
    Footer,
} from 'landing-blocks'

export default () => (
    <LandingProvider>
        <NavBar
            logo={<img width='120px' src='/logo.svg' />}
            navs={[
                <a>Features</a>,
                <a>Use Cases</a>,
                <a>Pricing</a>,
                <a>About Us</a>,
                <a>Login</a>,
            ]}
        />
        <Hero
            heading='Make your website editable for the whole team'
            subheading='Choose your technology. Use the API to fetch content. Empower
        your content team.'
            image={<img width='500px' src='/code.png' />}
            cta={<Button>Test it out</Button>}
        />
        <Feature
            heading='YourName is an awesome product'
            subheading='Awesome subheading'
            image={<img src='/feature1.jpg' width='500px' />}
            bg='gray.100'
        />
        <Feature
            heading='YourName is an awesome product'
            subheading='Awesome subheading'
            image={<img src='/feature1.jpg' width='500px' />}
            flip
        />
        <Footer
            businessName='YourName'
            columns={{
                Developers: [
                    <a>Quickstart</a>,
                    <a>Documentation</a>,
                    <a>Samples</a>,
                ],
                Company: [
                    <a>Quickstart</a>,
                    <a>Documentation</a>,
                    <a>Samples</a>,
                ],
                Product: [
                    <a>Quickstart</a>,
                    <a>Documentation</a>,
                    <a>Samples</a>,
                ],
            }}
        />
    </LandingProvider>
)

export default Page