Landing blocks is a react component library that packs together all the fundamental landing page components you need. These components are built to be self contained and super reusable in all your projects. Every component is built with these principles in mind:
The available components follow the landing pages most common elements, you can explore them in the main page
First install it with its peer dependencies
bashnpm install landing-blocks @emotion/core @emotion/styled emotion-theming @chakra-ui/core# oryarn add landing-blocks @emotion/core @emotion/styled emotion-theming @chakra-ui/core
You have to use the components under a LandingProvider
, this component passes the customization and base theme to other landing blocks components
jsximport React from 'react'import Head from 'next/head'import { Hero, NavBar, EmailForm } from 'landing-blocks/src'const Page = () => (<LandingProvider primary='#2D7FF9'><NavBarlogo={<img width='120px' src='/logo.svg' />}navs={[<a>Features</a>,<a>Use Cases</a>,<a>Pricing</a>,<a>About Us</a>,<a>Login</a>,]}/><Heroheading='Create, your way'subheading='Super cool subheading'image={<img width='500px' src='/hero.png' />}cta={<EmailForm />}fingerprint='Already using xxx? Sign in'/></LandingProvider>)
LandingProvider supports other props that let you customize the global look of your page
Here is an example of customization you can do
jsx<LandingProviderdark // make all text white, enable dark mode in all componentsbackground='#000'primary='#2D7FF9' // the primary color used in buttons, decoration elements, ...black='#222' // the body text colorwhite='#ffe' // the body text color when in dark modefontFamily='Roboto'pageWidth='1000px'><NavBar navs={[]} /></LandingProvider>
The dark prop changes the color of all the text element form black
to white
and sets the chakra-ui ColorMode to dark
You can use this prop when your background is dark and you need to invert the text and other components color
Every Landing Block has the same dark prop that does the same thing
jsx<LandingProvider dark><NavBarbg='black'dark // inverts text color/><Hero bg='blue' dark /></LandingProvider>
Every component follows the styled-system
specification which means you can pass margin, passing, background styling via props, here is an example
jsx<LandingProvider><Herom='20px' // m is marginp='20px' // p is paddingbg='black' // bg is background colordark/></LandingProvider>