Browse Source

website/pages: made feature

pull/5/head
remorses 1 year ago
parent
commit
14a12eafec
4 changed files with 107 additions and 84 deletions
  1. +5
    -1
      website/pages/_app.tsx
  2. +35
    -12
      website/pages/docs/components/banner.mdx
  3. +58
    -68
      website/pages/docs/components/feature.mdx
  4. +9
    -3
      website/pages/docs/components/hero.mdx

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

@ -32,7 +32,11 @@ export default function App(props) {
demos: false,
docs: {
index: true,
components: { hero: true },
components: {
hero: true,
feature: true,
featuresList: true,
},
},
}}
>

+ 35
- 12
website/pages/docs/components/banner.mdx View File

@ -1,19 +1,42 @@
export const breadcrumbs = ['Components', 'Hero']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
Banner,
} from 'landing-blocks/src'
# Banner
The banner is an element that catch the user attention, usually has a call to action that points to the next action the user should make
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider primary='#FF593D'>
<Banner
// dark
heading='Try Prismic Now!'
subheading='50% discount just for good fellows like you'
image={<GradientCurtains />}
cta={<Button>try it out</Button>}
/>
</LandingProvider>
```
<Playground iframe>
<LandingProvider bg='black' p='60px' primary='#FF593D'>
<Banner
flip
shadow='lg'
heading='Add Prisma to Your App or Start From Scratch'
bullet='READY TO TRY?'
primary='#9F7AEA'
borderTop='7px solid'
borderTopColor='primary'
bg='white'
image={
<Image ml='-60px' width='200px' src='/prisma/bannerImage.svg' />
}
cta={<Button>Try Prisma in 5 minutes</Button>}
/>
</LandingProvider>
</Playground>

+ 58
- 68
website/pages/docs/components/feature.mdx View File

@ -1,81 +1,71 @@
export const breadcrumbs = ['Components', 'Hero']
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
## Example on white
The feature section show some information about a feature of the product.
The following example recreates the datoCMS landing page
Its essential properties are
```jsx
<LandingProvider primary='#FF593D'>
<Feature
heading='Is content spread across endless different CMSs?'
subheading='How can you deliver a cohesive brand and message strategy if your company functions in silos and information is manually copy-pasted across tens of different platforms?'
image={<img src='/datocms/illustration1.svg' width='400px' />}
flip
/>
</LandingProvider>
```
- heading
- subheading
- image
- bullet
- cta
## Example on white
The following example recreates the datoCMS landing page
```jsx
<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>
```
## Dark
The following example recreates the datoCMS landing page
The following is a feature section from the Qovery website
```jsx
<LandingProvider primary='white'>
<Feature
heading='Fit your process'
subheading='Testim integrates with the tools you already use so you can stay in your flow.'
image={<img src='/testim/feature.png' width='700px' />}
bg='#1A2230'
py='0'
animate={false}
dark
/>
</LandingProvider>
```
<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>
## With bg image
## Example on dark
The following example recreates the datoCMS landing page
```jsx
<LandingProvider
backgroundImage='url("/rocketchat/sky.jpg")'
backgroundRepeat='repeat'
backgroundPosition='center'
backgroundSize='100% auto'
primary='white'
>
<Feature
dark
heading='Team Chat'
subheading='Open up the conversation and remove the need for CC/BCC by using Rocket.Chat Channels and Private Groups to speak to your team openly for greater transparency.'
floatingElement={
<Image
minW='700px'
src='/rocketchat/feature2.svg'
// position='absolute'
alignSelf='flex-end'
mr='-600px'
mt='200px'
/>
}
/>
</LandingProvider>
```
<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>

+ 9
- 3
website/pages/docs/components/hero.mdx View File

@ -16,12 +16,18 @@ 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.
The hero component is the most important component of every landing page, it is the first thing the user sees and sometimes it will be the only one.
Sometimes you want to show some floating element in the background, this can be done with the `floatingElement` prop.
Its essential properties are
- heading
- subheading
- image
- bullet
- cta
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

Loading…
Cancel
Save