Browse Source

more docs to hero

pull/5/head
remorses 11 months ago
parent
commit
a111128c5b
3 changed files with 18 additions and 9 deletions
  1. +1
    -1
      website/package.json
  2. +13
    -4
      website/pages/docs/components/hero.mdx
  3. +4
    -4
      yarn.lock

+ 1
- 1
website/package.json View File

@ -22,7 +22,7 @@
"@emotion/styled": "^10.0.27",
"@next/bundle-analyzer": "^9.4.4",
"baby-i-am-faded": "^0.0.13",
"dokz": "^1.0.29",
"dokz": "^1.0.34",
"landing-blocks": "*",
"next": "^9.4.1",
"react": "^16.13.1",

+ 13
- 4
website/pages/docs/components/hero.mdx View File

@ -10,32 +10,39 @@ import {
Divider,
Box,
TestimonialsLogos,
Image
Image,
} from 'landing-blocks/src'
import { GradientRect, GradientCurtains } from 'landing-blocks/src/decorations'
# Hero
The hero component is the most important component of every landing page, it is usually composed of an `heading`, `subheadinging`, an `image` and a `cta`, but sometimes you can also find some text under the cta buttons, this is called `fingerprint`.
Sometimes there is also a small text above the heading, this is what we call a `bullet`, here you can find information about a new product or feature like "new: discount of 50% only today" or something similar.
Sometimes you want to show some floating element in the background, this can be done with the `floatingElement` prop.
Here are some examples
With `landing-blocks` you need to input these essential elements and you instantly get an awesome landing page hero with a good layout on mobile and desktop
```jsx
<Hero
heading='Some heading'
subheading='More than 4.000 businesses use DatoCMS to create their online content at scale from a central hub, and distribute it easily via API to websites and any other digital experience.'
bullet='Introducing Landing Blocks 1.0'
image={<img />}
cta={<Button>Try it now for free!</Button>}
floatingElement={<GradientRect maxW='pageContainer' distortion={0.3} />}
/>
```
# Customizability
Landing blocks can create a variety of landing pages just changing the components props and using your own elements to the props that accept a `ReactNode` type, like `heading` and `subheading`
Below there are some live examples of some hero designs
## Example on white
The following example recreates the datoCMS landing page
The following example recreates the awesome DatoCMS landing page
<Playground iframe>
<LandingProvider primary='#FF593D'>
@ -73,6 +80,8 @@ The following example recreates the datoCMS landing page
The following is the Qovery landing page recreated using just a bunch of components
To invert the colors of the text to make it visible on dark background you have to pass the `dark` prop
<Playground iframe>
<LandingProvider spacing='60px' primary='white' bg='#323452'>
<NavBar

+ 4
- 4
yarn.lock View File

@ -3530,10 +3530,10 @@ directory-tree@^2.2.4:
resolved "https://registry.yarnpkg.com/directory-tree/-/directory-tree-2.2.4.tgz#6d5bd7d82e48378e256a1e87b678a43c50076e2e"
integrity sha512-2N43msQptKbi3WMfIs+U09yi6bfyKL+MWyj5VMj8t1F/Tx04bt1cn/EEIU3o1JBltlJk7NQnzOEuTNa/KQvbWA==
dokz@^1.0.29:
version "1.0.29"
resolved "https://registry.yarnpkg.com/dokz/-/dokz-1.0.29.tgz#5fc9f7198bd569e4405e58f05a3f0ee8ddae08e7"
integrity sha512-u3fDbE3KLy+vJDgq1z2G8NqJo3bLqKo7cvifP0c0Ggtzl9K0/UqgB2dxVqRxK0ApOVGahjmFkHxltX1W9dYpMw==
dokz@^1.0.34:
version "1.0.34"
resolved "https://registry.yarnpkg.com/dokz/-/dokz-1.0.34.tgz#604c79c221ca13252d7801e82418cfe54ac45d0c"
integrity sha512-5iTGnYxaFGZaGXAHtNlnh/xPHAKWJdzov220J94PSYKcMqKs94VTqt9ibn66pJ8XZypZjrp11NMRO92nwsK5jg==
dependencies:
"@babel/generator" "^7.10.2"
"@babel/parser" "^7.10.2"

Loading…
Cancel
Save