Browse Source

website/pages: added more stuff

pull/5/head
remorses 11 months ago
parent
commit
51f8061439
12 changed files with 194 additions and 156 deletions
  1. +1
    -0
      website/pages/_app.tsx
  2. +1
    -1
      website/pages/docs/components/banner.mdx
  3. +1
    -1
      website/pages/docs/components/faqs.mdx
  4. +1
    -1
      website/pages/docs/components/feature.mdx
  5. +97
    -85
      website/pages/docs/components/featuresGrid.mdx
  6. +1
    -1
      website/pages/docs/components/featuresList.mdx
  7. +1
    -1
      website/pages/docs/components/footer.mdx
  8. +1
    -3
      website/pages/docs/components/navBar.mdx
  9. +55
    -42
      website/pages/docs/components/pricing.mdx
  10. +2
    -2
      website/pages/docs/components/sectionTitle.mdx
  11. +31
    -17
      website/pages/docs/components/testimonialsTweets.mdx
  12. +2
    -2
      website/pages/docs/components/topBanner.mdx

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

@ -40,6 +40,7 @@ export default function App(props) {
footer: true,
banner: true,
testimonialsLogos: true,
testimonialsTweets: true,
},
},
}}

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

@ -20,7 +20,7 @@ The banner is an element that catch the user attention, usually has a call to ac
## Example on white
The following example recreates the datoCMS landing page
<Playground iframe>
<LandingProvider bg='black' p='60px' primary='#FF593D'>

+ 1
- 1
website/pages/docs/components/faqs.mdx View File

@ -4,7 +4,7 @@ export const breadcrumbs = ['Components', 'Hero']
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider>

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

@ -47,7 +47,7 @@ The following is a feature section from the Qovery website
## Example on dark
The following example recreates the datoCMS landing page
<Playground iframe>
<LandingProvider

+ 97
- 85
website/pages/docs/components/featuresGrid.mdx View File

@ -1,90 +1,102 @@
export const breadcrumbs = ['Components', 'Hero']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
FeaturesGrid,
} from 'landing-blocks/src'
# Features Grid
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider primary='#FF593D'>
<FeaturesGrid
heading='Analysis features'
subheading='Make sense of interview notes, transcripts, survey responses, and more.'
features={[
{
heading: 'Highlights',
subheading:
'Select text and highlight paragraphs, sentences, or words to tag them.',
icon: <img width='60px' src='/dovetail/feature1.svg' />,
},
{
heading: 'Charts',
subheading:
'Visualize your tags with multiple charts including a bar chart, pie chart, radar plot, and more.',
icon: <img width='60px' src='/dovetail/feature2.svg' />,
},
{
heading: 'Tag management',
subheading:
'asily modify your tags during analysis with controls like edit, copy, move, and merge.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Search',
subheading:
'Search the full text of research data and insights across all projects in your workspace.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Highlights',
subheading:
'Select text and highlight paragraphs, sentences, or words to tag them.',
icon: <img width='60px' src='/dovetail/feature1.svg' />,
},
{
heading: 'Charts',
subheading:
'Visualize your tags with multiple charts including a bar chart, pie chart, radar plot, and more.',
icon: <img width='60px' src='/dovetail/feature2.svg' />,
},
{
heading: 'Filtering',
subheading:
'asily modify your tags during analysis with controls like edit, copy, move, and merge.',
icon: <img width='60px' src='/dovetail/feature2.svg' />,
},
{
heading: 'Search',
subheading:
'Search the full text of research data and insights across all projects in your workspace.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Bulk Edit',
subheading:
'Select text and highlight paragraphs, sentences, or words to tag them.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Project',
subheading:
'Visualize your tags with multiple charts including a bar chart, pie chart, radar plot, and more.',
icon: <img width='60px' src='/dovetail/feature1.svg' />,
},
{
heading: 'Tag management',
subheading:
'asily modify your tags during analysis with controls like edit, copy, move, and merge.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Search',
subheading:
'Search the full text of research data and insights across all projects in your workspace.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
]}
/>
</LandingProvider>
```
<Playground>
<LandingProvider primary='#FF593D'>
<FeaturesGrid
heading='Analysis features'
subheading='Make sense of interview notes, transcripts, survey responses, and more.'
features={[
{
heading: 'Highlights',
subheading:
'Select text and highlight paragraphs, sentences, or words to tag them.',
icon: <img width='60px' src='/dovetail/feature1.svg' />,
},
{
heading: 'Charts',
subheading:
'Visualize your tags with multiple charts including a bar chart, pie chart, radar plot, and more.',
icon: <img width='60px' src='/dovetail/feature2.svg' />,
},
{
heading: 'Tag management',
subheading:
'asily modify your tags during analysis with controls like edit, copy, move, and merge.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Search',
subheading:
'Search the full text of research data and insights across all projects in your workspace.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Highlights',
subheading:
'Select text and highlight paragraphs, sentences, or words to tag them.',
icon: <img width='60px' src='/dovetail/feature1.svg' />,
},
{
heading: 'Charts',
subheading:
'Visualize your tags with multiple charts including a bar chart, pie chart, radar plot, and more.',
icon: <img width='60px' src='/dovetail/feature2.svg' />,
},
{
heading: 'Filtering',
subheading:
'asily modify your tags during analysis with controls like edit, copy, move, and merge.',
icon: <img width='60px' src='/dovetail/feature2.svg' />,
},
{
heading: 'Search',
subheading:
'Search the full text of research data and insights across all projects in your workspace.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Bulk Edit',
subheading:
'Select text and highlight paragraphs, sentences, or words to tag them.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Project',
subheading:
'Visualize your tags with multiple charts including a bar chart, pie chart, radar plot, and more.',
icon: <img width='60px' src='/dovetail/feature1.svg' />,
},
{
heading: 'Tag management',
subheading:
'asily modify your tags during analysis with controls like edit, copy, move, and merge.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
{
heading: 'Search',
subheading:
'Search the full text of research data and insights across all projects in your workspace.',
icon: <img width='60px' src='/dovetail/feature3.svg' />,
},
]}
/>
</LandingProvider>
</Playground>

+ 1
- 1
website/pages/docs/components/featuresList.mdx View File

@ -21,7 +21,7 @@ Features list is a small list of features your product has, it can have from 3 t
## Example on white
The following example recreates the datoCMS landing page
<Playground iframe>
<LandingProvider>

+ 1
- 1
website/pages/docs/components/footer.mdx View File

@ -25,7 +25,7 @@ Usually you find links that point to
## Example on white
The following example recreates the datoCMS landing page
<Playground iframe>
<LandingProvider primary='#FF593D'>

+ 1
- 3
website/pages/docs/components/navBar.mdx View File

@ -1,11 +1,9 @@
export const breadcrumbs = ['Components', 'Hero']
# Footer
# NavBar
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider>
<NavBar

+ 55
- 42
website/pages/docs/components/pricing.mdx View File

@ -1,47 +1,60 @@
export const breadcrumbs = ['Components', 'Hero']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
Link,
Pricing,
} from 'landing-blocks/src'
# Pricing
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider primary='#2D7FF9'>
<Pricing
features={[
'Records per base',
'Attachment space per base',
'Revision and snapshot history',
'Rich field types including file attachments, checkboxes, dropdowns, and more',
'Grid, calendar, form, kanban, and gallery views',
'Realtime collaboration and commenting',
]}
prices={[
{
heading: 'FREE',
subheading: 'Essential Features',
features: ['Unlimited', '1200', '2Gb', '2 Weeks'],
price: 'Free',
cta: <Link color='blue.600'>Get started</Link>,
},
{
heading: 'PLUS',
subheading: 'Essential Features',
features: ['Unlimited', '1200', '2Gb', '2 Weeks', 'x'],
price: '$10',
background: '#D1F0FD',
cta: <Link color='blue.600'>Get started</Link>,
},
{
heading: 'PRO',
subheading: 'Essential Features',
features: ['Unlimited', '1200', '2Gb', '2 Weeks', 'x', 'x'],
price: '$20',
background: '#FFEAB6',
cta: <Link color='blue.600'>Get started</Link>,
},
]}
/>
</LandingProvider>
```
<Playground iframe>
<LandingProvider primary='#2D7FF9'>
<Pricing
features={[
'Records per base',
'Attachment space per base',
'Revision and snapshot history',
'Rich field types including file attachments, checkboxes, dropdowns, and more',
'Grid, calendar, form, kanban, and gallery views',
'Realtime collaboration and commenting',
]}
prices={[
{
heading: 'FREE',
subheading: 'Essential Features',
features: ['Unlimited', '1200', '2Gb', '2 Weeks'],
price: 'Free',
cta: <Link color='blue.600'>Get started</Link>,
},
{
heading: 'PLUS',
subheading: 'Essential Features',
features: ['Unlimited', '1200', '2Gb', '2 Weeks', 'x'],
price: '$10',
background: '#D1F0FD',
cta: <Link color='blue.600'>Get started</Link>,
},
{
heading: 'PRO',
subheading: 'Essential Features',
features: ['Unlimited', '1200', '2Gb', '2 Weeks', 'x', 'x'],
price: '$20',
background: '#FFEAB6',
cta: <Link color='blue.600'>Get started</Link>,
},
]}
/>
</LandingProvider>
</Playground>

+ 2
- 2
website/pages/docs/components/sectionTitle.mdx View File

@ -1,10 +1,10 @@
export const breadcrumbs = ['Components', 'Hero']
# Footer
# SectionTitle
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider>

+ 31
- 17
website/pages/docs/components/testimonialsTweets.mdx View File

@ -1,12 +1,26 @@
export const breadcrumbs = ['Components', 'Hero']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
TopBanner,
Stack,
Divider,
Box,
TestimonialsLogos,
Image,
TestimonialsTweets,
} from 'landing-blocks/src'
# Testimonials Tweets
# TestimonialsTweets
Testimonials are a great way to show social proof to the customer, even better if these testimonials are verifyable via a twitter link.
Testimonials are a great way to show social proof to the customer, even better if these testimonials are verifiable via a twitter link.
An example of using the `TestimonialsTweets` component is this
```js
```jsx
<TestimonialsTweets
heading="Don't you trust me?"
subheading='Trust them'
@ -22,16 +36,16 @@ An example of using the `TestimonialsTweets` component is this
In the view below the tweets are in a single column but on wider screen they wrap in an organic way.
```jsx
<LandingProvider>
<TestimonialsTweets
heading="Don't you trust me?"
subheading='Trust them'
tweets={[
'933354946111705097',
'1246480107604078592', // you can use an id or an url
'https://twitter.com/naval/status/806034795658522624?s=21',
]}
/>
</LandingProvider>
```
<Playground iframe>
<LandingProvider>
<TestimonialsTweets
heading="Don't you trust me?"
subheading='Trust them'
tweets={[
'933354946111705097',
'1246480107604078592', // you can use an id or an url
'https://twitter.com/naval/status/806034795658522624?s=21',
]}
/>
</LandingProvider>
</Playground>

+ 2
- 2
website/pages/docs/components/topBanner.mdx View File

@ -1,10 +1,10 @@
export const breadcrumbs = ['Components', 'Hero']
# Features Grid
# TopBanner
## Example on white
The following example recreates the datoCMS landing page
```jsx
<LandingProvider bg='#24114D'>

Loading…
Cancel
Save