🚧 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.
 
 

71 lines
2.0 KiB

import { Playground } from 'dokz'
import { AspectRatioBox } from '@chakra-ui/core'
import {
Hero,
Link,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
Banner,
Feature,
} from 'landing-blocks/src'
import { FaArrowRight } from 'react-icons/fa'
# Feature
The feature section show some information about a feature of the product.
Its essential properties are
- heading
- subheading
- image
- bullet
- cta
## Example on white
The following is a feature section from the Qovery website
<Playground iframe>
<LandingProvider primary='#FF593D'>
<Feature
heading='Fully integrated to git'
subheading='Qovery is fully integrated to Github, Bitbucket and Gitlab. Once you have pushed your code, Qovery launches all the necessaries steps to make your application available online.'
image={<img src='/quovery/feature1.png' width='500px' />}
bg='#F8F8FF'
/>
</LandingProvider>
</Playground>
## Example on dark
The following example recreates the datoCMS landing page
<Playground iframe>
<LandingProvider
background='radial-gradient( 37.86% 77.79% at 50% 100%, rgba(113,128,150,0.25) 0%, rgba(113,128,150,0) 100% ), linear-gradient(180deg,#1a202c 0%,#2d3748 100%), linear-gradient(180deg,#0d0f14 0%,rgba(27,32,43,0) 100%),#2f3747'
primary='#52BD95'
>
<Feature
dark
heading='One API. Cleaner code.'
subheading='Use one API to collect analytics data, across any platform. We have SDKs for Javascript, iOS, Android, and 20+ server-side languages.'
bullet='Segment for Engineering Teams'
cta={
<Link>
Explore Segment for Marketing
<Box mx='10px' display='inline' as={FaArrowRight} />
</Link>
}
image={<Image h='560px' src='/segment/banner.svg' />}
/>
</LandingProvider>
</Playground>