Browse Source

made featurelist

pull/1/head
remorses 1 year ago
parent
commit
8d04381567
3 changed files with 82 additions and 0 deletions
  1. +50
    -0
      core/src/FeaturesList.tsx
  2. +1
    -0
      core/src/index.tsx
  3. +31
    -0
      demos/pages/index.tsx

+ 50
- 0
core/src/FeaturesList.tsx View File

@ -0,0 +1,50 @@
import { Heading as H, HeadingProps, Stack, Box } from '@chakra-ui/core'
import React, { FC } from 'react'
import { Col, Row, Heading, Spacer } from '.'
import { Text } from '@chakra-ui/core'
import { SubHeading } from './SubHeading'
export const FeaturesList = ({
heading,
subhead = '',
features,
backgroundColor = 'transparent',
}) => {
return (
<Col py='120px' bg={backgroundColor}>
<Stack spacing={2} flex='1' textAlign='center' align='center'>
<Heading lineHeight='50px' fontWeight='medium' fontSize='36px'>
{heading}
</Heading>
<Text
lineHeight='34px'
m={0}
opacity={0.6}
fontWeight='normal'
fontSize='16px'
maxW='500px'
>
{subhead}
</Text>
</Stack>
<Box mt='60px' />
<Stack isInline spacing={4} flex='1'>
{features.map((step, i) => (
<Feature key={i} {...step} />
))}
</Stack>
</Col>
)
}
const Feature = ({ heading, subhead, icon, ...rest }) => {
return (
<Stack spacing='20px' p='40px' {...rest}>
<Box>{icon}</Box>
<Heading fontSize='20px'>{heading}</Heading>
<Text m={0} fontSize='18px' opacity={0.6} lineHeight='30px'>
{subhead}
</Text>
</Stack>
)
}

+ 1
- 0
core/src/index.tsx View File

@ -4,6 +4,7 @@ export { Heading } from './Heading'
export { SubHeading } from './SubHeading'
export { Feature } from './Feature'
export { HowItWorks } from './HowItWorks'
export { FeaturesList } from './FeaturesList'
export * from './layout'
import {
ThemeProvider,

+ 31
- 0
demos/pages/index.tsx View File

@ -9,6 +9,7 @@ import {
Col,
Feature,
HowItWorks,
FeaturesList,
} from 'react-landing/src'
const Page = () => (
@ -53,6 +54,36 @@ const Page = () => (
},
]}
/>
<FeaturesList
heading='Why we think Prismic is good for developers '
features={[
{
heading: 'API to fetch content',
icon: (
<img src='https://images.prismic.io/prismic-website%2F4e288d2e-66cd-4209-9ada-fbfb6f1c19c1_api.svg?auto=compress,format' />
),
subhead:
'Unlike a traditional CMS, an API-based approach is much simpler and more secure. This includes options for REST, GraphQL, and SDKs that help our users to make the most of Prismic.',
},
{
heading: 'No maintenance or server setup',
icon: (
<img src='https://images.prismic.io/prismic-website%2F4080f213-f9e0-47f1-ae57-1d26874f1a08_setup.svg?auto=compress,format' />
),
subhead:
"We offer a high-level SLAs, scalability, and a global CDN. We'll make sure that everything is running smoothly in the background so that you can focus on your projects.",
},
{
heading: 'A growing ecosystem',
icon: (
<img src='https://images.prismic.io/prismic-website%2F4268d459-cec4-4e46-856b-d2eaba8d71f8_ecosystem.svg?auto=compress,format' />
),
subhead:
'Built by developers for developers - we actively engage with the community. Enjoy content that is created specifically for our community and join our Slack to discuss your Prismic projects.',
},
]}
backgroundColor='gray.100'
/>
</LandingProvider>
)

Loading…
Cancel
Save