🚧 Landing pages building blocks https://landing-blocks.now.sh
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.
 
 
remorses ffbca9ec7e RELEASING: Releasing 1 package(s) 4 months ago
.changeset RELEASING: Releasing 1 package(s) 4 months ago
.github/workflows updated to latest chakra 5 months ago
.vscode Initial commit 1 year ago
landing-blocks RELEASING: Releasing 1 package(s) 4 months ago
website updated to latest chakra 5 months ago
.gitattributes Initial commit 1 year ago
.gitignore changed button props type 1 year ago
CHANGELOG.md changelog 5 months ago
README.md changelog 5 months ago
now.json ok fast refresh and zeit now 1 year ago
package.json updated to latest chakra 5 months ago
yarn.lock updated to latest chakra 5 months 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 { ChakraProvider } from '@chakra-ui/react'
import {
    LandingProvider,
    Hero,
    Heading,
    NavBar,
    Button,
    Footer,
} from 'landing-blocks'

export default () => (
    <ChakraProvider>
        <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>
    </ChakraProvider>
)

export default Page