Browse Source

made the how it works section

pull/5/head
remorses 10 months ago
parent
commit
fbb1a58922
3 changed files with 61 additions and 37 deletions
  1. +3
    -4
      landing-blocks/src/HowItWorks.tsx
  2. +1
    -0
      website/pages/_app.tsx
  3. +57
    -33
      website/pages/docs/components/howItWorks.mdx

+ 3
- 4
landing-blocks/src/HowItWorks.tsx View File

@ -29,7 +29,7 @@ export function HowItWorks({
}: HowItWorksProps) {
const { Faded } = useFaded({ animate })
return (
<PageContainer py='120px' {...rest}>
<PageContainer spacing='40px' py='120px' {...rest}>
<Stack
as={Faded}
spacing='40px'
@ -45,7 +45,7 @@ export function HowItWorks({
</Heading>
<Subheading maxW='700px'>{subheading}</Subheading>
</Stack>
<Box mt='60px' />
{/* <Box mt='60px' /> */}
<Stack align='stretch' spacing='60px' flex='1'>
{steps.map((step, i) => (
<Step
@ -74,11 +74,10 @@ const Step = ({
const { Faded } = useFaded({ animate })
return (
<Stack
justify='space-between'
align='center'
direction={['column', null, flip ? 'row-reverse' : 'row']}
// spacing='40px'
spacing='40px'
{...rest}
>
<Stack as={Faded} minW='300px' maxW='500px' flex='1' spacing='40px'>

+ 1
- 0
website/pages/_app.tsx View File

@ -36,6 +36,7 @@ export default function App(props) {
hero: true,
feature: true,
featuresList: true,
howItWorks: true,
},
},
}}

+ 57
- 33
website/pages/docs/components/howItWorks.mdx View File

@ -1,38 +1,62 @@
export const breadcrumbs = ['Components', 'Hero']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
Banner,
HowItWorks,
} from 'landing-blocks/src'
# Footer
# HowItWorks
This section is useful on website that have a clearly defined workflow, like a shipping business: make a package, call us, send the packet.
Every step has the following properties
- heading
- subheading
- decorativeHeading
- image
## Example on white
The following example recreates the datoCMS landing page
The following example recreates the Prismic How it works section
```jsx
<LandingProvider primary='#FF593D'>
<HowItWorks
heading='How Prismic works'
subheading='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='/prismic/step1.jpg' />,
subheading:
"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='/prismic/step2.jpg' />,
subheading:
"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='/prismic/step3.png' />,
subheading:
'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>
```
<Playground iframe>
<LandingProvider primary='#FF593D'>
<HowItWorks
heading='How Prismic works'
subheading='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='/prismic/step1.jpg' />,
subheading:
"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='/prismic/step2.jpg' />,
subheading:
"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='/prismic/step3.png' />,
subheading:
'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>
</Playground>

Loading…
Cancel
Save