Browse Source

added howit works

pull/1/head
remorses 1 year ago
parent
commit
bcf195b1b3
6 changed files with 96 additions and 0 deletions
  1. +68
    -0
      core/src/HowItWorks.tsx
  2. +1
    -0
      core/src/index.tsx
  3. +27
    -0
      demos/pages/index.tsx
  4. BIN
      demos/public/step1.jpg
  5. BIN
      demos/public/step2.jpg
  6. BIN
      demos/public/step3.png

+ 68
- 0
core/src/HowItWorks.tsx View File

@ -0,0 +1,68 @@
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 HowItWorks = ({
heading,
subhead,
steps,
backgroundColor = 'transparent',
}) => {
return (
<Col py='120px'>
<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 spacing={12} flex='1'>
{steps.map((step, i) => (
<Step key={i} {...step} number={i + 1} flip={i % 2 !== 0} />
))}
</Stack>
</Col>
)
}
const Step = ({ heading, subhead, number, image, flip = false, ...rest }) => {
const dir = flip ? 'row-reverse' : 'row'
return (
<Row flexDir={dir} px='120px' align='center' {...rest}>
<Stack flex='1' spacing={6}>
<Stack isInline align='flex-end' opacity={0.1}>
<Heading lineHeight='70px' fontSize='80px'>
{number}
</Heading>
<Heading isTruncated maxW='300px' fontWeight='bold' fontSize='18px'>
{' . ' + heading}
</Heading>
</Stack>
<Heading fontSize='20px'>{heading}</Heading>
<Text
fontWeight='normal'
m={0}
lineHeight='28px'
opacity={0.7}
fontSize='16px'
>
{subhead}
</Text>
</Stack>
<Box ml='40px'/>
<Col flex='1'>{image}</Col>
</Row>
)
}

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

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

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

@ -8,6 +8,7 @@ import {
Divider,
Col,
Feature,
HowItWorks,
} from 'react-landing/src'
const Page = () => (
@ -26,6 +27,32 @@ const Page = () => (
backgroundColor='gray.100'
flip
/>
<HowItWorks
heading='How Prismic works'
subhead='A tool built to allow your content, design, and development teams to produce a finished product that they can all be proud of.'
steps={[
{
heading: 'Model your editor',
image: <img width='500px' src='step1.jpg' />,
subhead:
"Model custom types to match your desired design. Create reusable fields and custom components (we call them Slices...you'll hear us talk about them a lot) to enable dynamic layouts and build the editor experience that you want",
},
{
heading:
'Hand over to your content team to start creating content',
image: <img width='500px' src='step2.jpg' />,
subhead:
"Once you've managed the initial setup, you can hand the management over to your content team so that editors can start filling content while you're choosing the framework. With Prismic, creating beautiful content becomes simple enough that even non-technical employees can handle it. ",
},
{
heading:
'Deploy on Zeit Now, Netlify, Heroku or your favorite hosting platform',
image: <img width='500px' src='step3.png' />,
subhead:
'We take care of hosting and scaling the publishing tools. All you have to do is host the website, but you can choose whichever hosting platform you prefer.',
},
]}
/>
</LandingProvider>
)

BIN
demos/public/step1.jpg View File

Before After
Width: 967  |  Height: 914  |  Size: 38 KiB

BIN
demos/public/step2.jpg View File

Before After
Width: 1002  |  Height: 960  |  Size: 33 KiB

BIN
demos/public/step3.png View File

Before After
Width: 1114  |  Height: 862  |  Size: 25 KiB

Loading…
Cancel
Save