Browse Source

replaced stack with mine everywhere

pull/3/head
remorses 1 year ago
parent
commit
3c05bf1643
35 changed files with 247 additions and 150 deletions
  1. +1
    -1
      landing-blocks/package.json
  2. +3
    -4
      landing-blocks/src/Banner.tsx
  3. +1
    -1
      landing-blocks/src/CodeSnippet.tsx
  4. +1
    -1
      landing-blocks/src/Countdown.tsx
  5. +3
    -2
      landing-blocks/src/Divider.tsx
  6. +10
    -8
      landing-blocks/src/EmailForm.tsx
  7. +7
    -3
      landing-blocks/src/Faqs.tsx
  8. +2
    -3
      landing-blocks/src/Feature.tsx
  9. +8
    -3
      landing-blocks/src/FeaturesGrid.tsx
  10. +3
    -4
      landing-blocks/src/FeaturesList.tsx
  11. +2
    -3
      landing-blocks/src/Footer.tsx
  12. +1
    -1
      landing-blocks/src/GumroadButton.tsx
  13. +1
    -1
      landing-blocks/src/Heading.tsx
  14. +7
    -6
      landing-blocks/src/Hero.tsx
  15. +5
    -7
      landing-blocks/src/HowItWorks.tsx
  16. +2
    -1
      landing-blocks/src/LandingProvider.tsx
  17. +35
    -17
      landing-blocks/src/NavBar.tsx
  18. +6
    -5
      landing-blocks/src/Pricing.tsx
  19. +1
    -1
      landing-blocks/src/Section.tsx
  20. +1
    -1
      landing-blocks/src/SectionTitle.tsx
  21. +1
    -1
      landing-blocks/src/Subheading.tsx
  22. +2
    -3
      landing-blocks/src/TestimonialsLogos.tsx
  23. +2
    -3
      landing-blocks/src/TestimonialsTweets.tsx
  24. +1
    -1
      landing-blocks/src/TopBanner.tsx
  25. +1
    -1
      website/package.json
  26. +14
    -9
      website/pages/_app.tsx
  27. +9
    -1
      website/pages/demos/kintohub.tsx
  28. +11
    -4
      website/pages/demos/prisma.tsx
  29. +9
    -1
      website/pages/demos/quovery.tsx
  30. +2
    -1
      website/pages/demos/rocketchat.tsx
  31. +9
    -1
      website/pages/demos/segment.tsx
  32. +41
    -32
      website/pages/docs/components/hero.mdx
  33. +8
    -1
      website/pages/docs/index.mdx
  34. +29
    -10
      website/pages/index.tsx
  35. +8
    -8
      yarn.lock

+ 1
- 1
landing-blocks/package.json View File

@ -53,7 +53,7 @@
"color-js": "^1.0.5",
"emotion-theming": "^10.0.27",
"intersection-observer": "^0.7.0",
"layout-kit-react": "^0.0.3",
"layout-kit-react": "^0.1.1",
"lodash.get": "^4.4.2",
"lodash.merge": "^4.6.2",
"prism-react-renderer": "^1.1.0",

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

@ -1,4 +1,4 @@
import { Box, Stack } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'
@ -37,7 +37,7 @@ export function Banner({
spacing='40px'
bg='gray.100'
// isReversed={flip}
flexDirection={['column', null, direction]}
direction={['column', null, direction]}
w='100%'
borderRadius='10px'
p='30px'
@ -49,7 +49,7 @@ export function Banner({
minW='300px'
w={image ? 'auto' : '100%'}
justify='space-between'
flexDirection={['column', null, image ? 'column' : 'row']}
direction={['column', null, image ? 'column' : 'row']}
>
<Stack spacing='20px'>
{bullet && <Bullet my='10px'>{bullet}</Bullet>}
@ -62,7 +62,6 @@ export function Banner({
</Heading>
<Subheading
lineHeight='34px'
m={0}
opacity={0.6}
fontWeight='normal'
fontSize='text'

+ 1
- 1
landing-blocks/src/CodeSnippet.tsx View File

@ -1,4 +1,4 @@
import { Box, StackProps } from '@chakra-ui/core'
import { Box, StackProps } from 'layout-kit-react'
import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer'
import darkPrismTheme from 'prism-react-renderer/themes/duotoneDark'
// import lightTheme from 'prism-react-renderer/themes/nightOwlLight'

+ 1
- 1
landing-blocks/src/Countdown.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode, useEffect, useState } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'

+ 3
- 2
landing-blocks/src/Divider.tsx View File

@ -1,5 +1,6 @@
import { Box, Stack, useColorMode } from '@chakra-ui/core'
import { useColorMode } from '@chakra-ui/core'
import Color from 'color-js'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { PageContainer, PageContainerProps } from './layout'
@ -17,7 +18,7 @@ export const Divider = ({ heading = '', ...rest }: DividerProps) => {
align='center'
spacing='20px'
direction='row'
opacity={.6}
opacity={0.6}
>
<Line />
<Box

+ 10
- 8
landing-blocks/src/EmailForm.tsx View File

@ -1,4 +1,5 @@
import { Box, Input, Stack, StackProps, useColorMode } from '@chakra-ui/core'
import { Input, useColorMode } from '@chakra-ui/core'
import { Box, Stack, StackProps } from 'layout-kit-react'
import React, { ReactNode, useState } from 'react'
import MailchimpSubscribe from 'react-mailchimp-subscribe'
import { Button } from './Button'
@ -29,7 +30,7 @@ export function EmailForm({
<Stack
justify='flex-start'
width='auto'
flexDirection={['column', null, 'row']}
direction={['column', null, 'row']}
// align='center'
fontSize='text'
{...rest}
@ -39,11 +40,13 @@ export function EmailForm({
onChange={(e) => onChange(e.target.value)}
value={value}
shadow='sm'
bg={{
dark: 'rgba(255,255,255, .2)',
// light: 'rgba(0,0,0,.03)',
light: '#fff',
}[colorMode]}
bg={
{
dark: 'rgba(255,255,255, .2)',
// light: 'rgba(0,0,0,.03)',
light: '#fff',
}[colorMode]
}
minW='250px'
minH='40px'
type='email'
@ -55,7 +58,6 @@ export function EmailForm({
<Button
onClick={onSubmit}
shadow='sm'
m='0'
px='20px'
textAlign='center'
>

+ 7
- 3
landing-blocks/src/Faqs.tsx View File

@ -1,4 +1,5 @@
import { Accordion, AccordionHeader, AccordionIcon, AccordionItem, AccordionPanel, Box, Heading, Stack } from '@chakra-ui/core'
import { Accordion, AccordionHeader, AccordionIcon, AccordionItem, AccordionPanel, Heading } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { useFaded } from './hooks'
import { PageContainer, PageContainerProps } from './layout'
@ -33,13 +34,16 @@ export function Faqs({
minWidth='100%'
>
{/* <Bullett>{bullett}</Bullett> */}
<Heading >{heading}</Heading>
<Heading>{heading}</Heading>
<Subheading fontSize='text' maxW='700px'>
{subheading}
</Subheading>
<Accordion allowToggle minWidth='100%'>
{faqs.map((x) => (
<AccordionItem key={x.question.toString()} minWidth='100%'>
<AccordionItem
key={x.question.toString()}
minWidth='100%'
>
<AccordionHeader minH='60px'>
<Box
fontSize='24px'

+ 2
- 3
landing-blocks/src/Feature.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'
@ -37,7 +37,7 @@ export function Feature({
spacing='40px'
justifyItems='space-between'
// isReversed={flip}
flexDirection={['column', null, dir(direction)]}
direction={['column', null, dir(direction)]}
>
<Stack as={Faded} spacing='30px' flex='1' minW='300px'>
{bullet && <Bullet my='10px'>{bullet}</Bullet>}
@ -50,7 +50,6 @@ export function Feature({
</Heading>
<Subheading
lineHeight='34px'
m={0}
opacity={0.6}
fontWeight='normal'
fontSize='text'

+ 8
- 3
landing-blocks/src/FeaturesGrid.tsx View File

@ -1,4 +1,5 @@
import { Box, SimpleGrid, Stack } from '@chakra-ui/core'
import { SimpleGrid } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'
@ -35,7 +36,11 @@ export function FeaturesGrid({
textAlign='center'
align='center'
>
<Heading lineHeight='50px' fontWeight='medium' fontSize='heading'>
<Heading
lineHeight='50px'
fontWeight='medium'
fontSize='heading'
>
{heading}
</Heading>
<Subheading>{subheading}</Subheading>
@ -82,7 +87,7 @@ const Feature = ({
<Heading fontSize='text' fontWeight='semibold'>
{heading}
</Heading>
<Box m={0} fontSize='text' opacity={0.8} lineHeight='24px'>
<Box fontSize='text' opacity={0.8} lineHeight='24px'>
{subheading}
</Box>
</Stack>

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

@ -1,4 +1,4 @@
import { Box, Stack, StackProps } from '@chakra-ui/core'
import { Box, Stack, StackProps } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'
@ -51,10 +51,9 @@ export function FeaturesList({
)}
<Stack
as={Faded}
flexDir='row'
direction={['column', null, 'row']}
spacing='20px'
flex='1'
flexWrap='wrap'
>
{features.map((step, i) => (
<Feature
@ -94,7 +93,7 @@ const Feature = ({
{icon}
</Col>
<Heading fontSize='subheading'>{heading}</Heading>
<Box m={0} fontSize='text' opacity={0.6} lineHeight='30px'>
<Box fontSize='text' opacity={0.6} lineHeight='30px'>
{subheading}
</Box>
</Stack>

+ 2
- 3
landing-blocks/src/Footer.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { PageContainer, PageContainerProps } from './layout'
@ -15,8 +15,7 @@ export function Footer({
return (
<PageContainer py='60px' minHeight='200px' {...rest}>
<Stack
flexDir='row'
flexWrap='wrap'
direction={['column', null, 'row']}
justifyContent='space-evenly'
spacing='60px'
>

+ 1
- 1
landing-blocks/src/GumroadButton.tsx View File

@ -44,7 +44,7 @@ const Placeholder = (props) => {
return (
<Link
display='flex'
flexDir='column'
direction='column'
alignItems='center'
justifyContent='center'
borderRadius='6px'

+ 1
- 1
landing-blocks/src/Heading.tsx View File

@ -7,5 +7,5 @@ export function Heading(props: HeadingProps) {
return <Fragment />
}
const as = typeof props.children === 'string' ? 'h2' : 'span'
return <H minW='100px' as={as} m={0} fontSize='heading' fontWeight='medium' {...props} />
return <H minW='100px' as={as} fontSize='heading' fontWeight='medium' {...props} />
}

+ 7
- 6
landing-blocks/src/Hero.tsx View File

@ -1,7 +1,6 @@
// @jsx jsx
import {jsx} from '@emotion/core'
jsx
import { Box, Stack, } from '@chakra-ui/core'
import { jsx } from '@emotion/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'
@ -9,6 +8,7 @@ import { useFaded } from './hooks'
import { Col, PageContainer, PageContainerProps, Row } from './layout'
import { Subheading } from './Subheading'
import { clone } from './support'
jsx
export type HeroProps = {
heading?: ReactNode
@ -36,12 +36,13 @@ export function Hero({
<Row
justify={image ? 'flex-start' : 'center'}
w='100%'
flexDir={['column', 'column', 'row']}
direction={['column', 'column', 'row']}
align='center'
>
<Stack
as={Faded}
maxW={['100%', null, image ? '500px' : '100%']}
minW='33%'
spacing='40px'
align={[
'center',
@ -61,7 +62,7 @@ export function Hero({
<Heading fontSize='46px'>{heading}</Heading>
</Col>
<Subheading maxW='700px'>{subheading}</Subheading>
<Stack align={['center', 'center', 'flex-start']}>
<Stack spacing='6px' align={['center', 'center', 'flex-start']}>
<Box>{clone(cta)}</Box>
{/* <Button
px='40px'
@ -75,7 +76,7 @@ export function Hero({
</Stack>
</Stack>
{image && (
<Row flexDir={['column', null, 'row']} as={Faded} flex='1'>
<Row direction={['column', null, 'row']} as={Faded} flex='1'>
<Box ml='40px' mt='40px' flex='1' />
<Col
align='center'

+ 5
- 7
landing-blocks/src/HowItWorks.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'
@ -71,21 +71,19 @@ const Step = ({
animate = undefined,
...rest
}: StepProps & { number; flip }) => {
const dir = flip ? 'row-reverse' : 'row'
const { Faded } = useFaded({ animate })
return (
<Stack
flexDir={dir}
justify='space-between'
align='center'
flexWrap='wrap'
direction={['column', null, flip ? 'row-reverse' : 'row']}
// spacing='40px'
{...rest}
>
<Stack as={Faded} minW='300px' maxW='500px' flex='1' spacing='40px'>
<Stack
isInline
flexDirection='row'
direction='row'
align='flex-end'
opacity={0.3}
>
@ -108,7 +106,7 @@ const Step = ({
<Box
maxW='400px'
fontWeight='medium'
m={0}
lineHeight='1.8em'
opacity={0.5}
fontSize='subtext'

+ 2
- 1
landing-blocks/src/LandingProvider.tsx View File

@ -1,5 +1,6 @@
import { CSSReset, DarkMode, DefaultTheme, FlexProps, Stack, theme as chakraTheme, useColorMode } from '@chakra-ui/core'
import { CSSReset, DarkMode, DefaultTheme, theme as chakraTheme, useColorMode } from '@chakra-ui/core'
import { css, Global } from '@emotion/core'
import { FlexProps, Stack } from 'layout-kit-react'
import merge from 'lodash/fp/merge'
import React, { Fragment, useMemo } from 'react'
import { PropagatedThemeProvider } from './layout'

+ 35
- 17
landing-blocks/src/NavBar.tsx View File

@ -1,13 +1,13 @@
import { Box, Button, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, Stack, useDisclosure } from '@chakra-ui/core'
import { Button, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay, useDisclosure } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { FiMenu as Menu } from 'react-icons/fi'
import { useMyColorMode } from './hooks'
import { darkStyles, PageContainer, PageContainerProps, Row } from './layout'
import { clone } from './support'
export type NavBarProps = {
logo: ReactNode
navs?: ReactNode[]
navs?: ReactNode | ReactNode[]
} & PageContainerProps
export const NavBar = ({ logo, navs = [], ...rest }: NavBarProps) => {
@ -26,11 +26,23 @@ export const NavBar = ({ logo, navs = [], ...rest }: NavBarProps) => {
align='center'
display={['none', 'none', 'flex']}
>
{navs.map((x, i) => (
<Box key={i} fontSize='text' fontWeight='medium'>
{clone(x)}
</Box>
))}
{Array.isArray(navs) ? (
<Stack direction='row' spacing='20px'>
{navs.map((x, i) => (
<Stack
key={i}
fontSize='text'
alignItems='center'
justify='center'
fontWeight='medium'
>
{x}
</Stack>
))}
</Stack>
) : (
navs
)}
</Stack>
<Button
display={['block', 'block', 'none']}
@ -64,15 +76,21 @@ export const NavBar = ({ logo, navs = [], ...rest }: NavBarProps) => {
spacing='20px'
align='center'
>
{navs.map((x, i) => (
<Box
key={i}
fontSize='text'
fontWeight='medium'
>
{x}
</Box>
))}
{Array.isArray(navs) ? (
<Stack spacing='40px'>
{navs.map((x, i) => (
<Box
key={i}
fontSize='text'
fontWeight='medium'
>
{x}
</Box>
))}
</Stack>
) : (
navs
)}
</Stack>
</DrawerBody>
</DrawerContent>

+ 6
- 5
landing-blocks/src/Pricing.tsx View File

@ -1,5 +1,6 @@
import { Box, DarkMode, Divider, Stack, StackProps } from '@chakra-ui/core'
import { DarkMode, Divider } from '@chakra-ui/core'
import Color from 'color-js'
import { Box, Stack, StackProps } from 'layout-kit-react'
import React, { Fragment, ReactNode } from 'react'
import { Heading } from './Heading'
import { useMyColorMode } from './hooks'
@ -41,7 +42,7 @@ export function Pricing({
return (
<PageContainer {...rest}>
<Stack flexDir={['column', null, 'row']}>
<Stack direction={['column', null, 'row']}>
<Stack minW={featuresWidth} display={['none', null, 'flex']}>
<Stack minH={pricingNamesMinH}>
<Box fontWeight='medium' fontSize='subheading'>
@ -50,7 +51,7 @@ export function Pricing({
<Box opacity={0.7}>{subheading}</Box>
</Stack>
<Box h={pricingHeaderMinH} />
<Stack flexDir='row'>
<Stack direction='row'>
<Stack spacing='20px'>
{features.map((x) => (
<Box textAlign='right' minH={featureLineMinH}>
@ -70,7 +71,7 @@ export function Pricing({
<Stack
align={['center', null, 'flex-start']}
w='100%'
flexDir={['column', null, 'row']}
direction={['column', null, 'row']}
justify='space-between'
spacing={['100px']}
>
@ -139,7 +140,7 @@ function PriceColumn({
maxH={['none', null, pricingHeaderMinH]}
py='20px'
>
<Heading textAlign='center' fontWeight='semibold' >
<Heading textAlign='center' fontWeight='semibold'>
{priceSection.price}
</Heading>
<Box fontSize='subtext' opacity={0.7}>

+ 1
- 1
landing-blocks/src/Section.tsx View File

@ -1,4 +1,4 @@
import { Box, BoxProps, Stack, StackProps } from '@chakra-ui/core'
import { Box, BoxProps, Stack, StackProps } from 'layout-kit-react'
import React from 'react'
import { getPageContainerProps } from './support'

+ 1
- 1
landing-blocks/src/SectionTitle.tsx View File

@ -1,4 +1,4 @@
import { Stack } from '@chakra-ui/core'
import { Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { Heading } from './Heading'

+ 1
- 1
landing-blocks/src/Subheading.tsx View File

@ -9,7 +9,7 @@ export function Subheading(props: HeadingProps) {
return (
<H
as={as}
m={0}
//
opacity={0.64}
fontWeight='medium'
lineHeight='1.4em'

+ 2
- 3
landing-blocks/src/TestimonialsLogos.tsx View File

@ -1,4 +1,4 @@
import { Stack } from '@chakra-ui/core'
import { Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'
@ -30,9 +30,8 @@ export function TestimonialsLogos({
)}
<Stack
as={Faded}
flexDir={['column', 'column', 'row']}
direction={['column', 'column', 'row']}
justify='space-evenly'
isInline // TODO Stack should get isInline from flexDir if it is an array
spacing='40px'
align='center'
>

+ 2
- 3
landing-blocks/src/TestimonialsTweets.tsx View File

@ -1,5 +1,5 @@
import { Box, Stack } from '@chakra-ui/core'
import styled from '@emotion/styled'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { TwitterTweetEmbed } from 'react-twitter-embed'
import { Heading } from './Heading'
@ -33,10 +33,9 @@ export function TestimonialsTweets({
)}
<Col
as={Faded}
flexDir={['column', 'column', 'row']}
direction={['column', 'column', 'row']}
justify='space-evenly'
align='center'
flexWrap='wrap'
minW='100%'
>
{tweets.map((id, i) => (

+ 1
- 1
landing-blocks/src/TopBanner.tsx View File

@ -1,4 +1,4 @@
import { Box, Stack } from '@chakra-ui/core'
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Bullet } from './Bullet'
import { PageContainer, PageContainerProps } from './layout'

+ 1
- 1
website/package.json View File

@ -21,7 +21,7 @@
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"baby-i-am-faded": "^0.0.13",
"dokz": "^1.0.27",
"dokz": "^1.0.28",
"landing-blocks": "*",
"next": "^9.4.1",
"react": "^16.13.1",

+ 14
- 9
website/pages/_app.tsx View File

@ -2,7 +2,15 @@ import NextLink from 'next/link'
import { DokzProvider, GithubLink, ColorModeSwitch } from 'dokz/dist'
import React from 'react'
import { useMyColorMode } from 'landing-blocks/src/hooks'
import { Link, Stack, Box, useColorMode } from '@chakra-ui/core'
import { Link, useColorMode } from '@chakra-ui/core'
import {
Box,
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
import { Footer } from 'landing-blocks/src/Footer'
import { LogoIcon, LogoIconBlack, LogoBlack, LogoWhite } from '../svgs'
@ -35,14 +43,11 @@ export default function App(props) {
)
}
export const headingNavLinks = (
<Stack isInline spacing='20px'>
<MyLink href='/#components'>Components</MyLink>
<MyLink href='/#demos'>Demos</MyLink>
<MyLink href='#'>Newsletter</MyLink>,
<Box />
</Stack>
)
export const headingNavLinks = [
<MyLink href='/#components'>Components</MyLink>,
<MyLink href='/#demos'>Demos</MyLink>,
<MyLink href='#'>Newsletter</MyLink>,
]
export function MyFooter({ ...rest }) {
return (

+ 9
- 1
website/pages/demos/kintohub.tsx View File

@ -16,7 +16,15 @@ import {
SectionTitle,
Button,
} from 'landing-blocks/src'
import { Box, Stack, Image } from '@chakra-ui/core'
import { Image } from '@chakra-ui/core'
import {
Box,
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
const Page = () => (
<LandingProvider primary='white'>

+ 11
- 4
website/pages/demos/prisma.tsx View File

@ -23,8 +23,15 @@ import {
import Highlight from 'react-highlight'
import { GradientCurtains } from 'landing-blocks/src/decorations'
import { Image, Stack, AspectRatioBox } from '@chakra-ui/core'
import { Link, Box } from '@chakra-ui/core'
import { Image, AspectRatioBox } from '@chakra-ui/core'
import {
Box,
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
import { FiCheck } from 'react-icons/fi'
const heroCode = `
@ -107,14 +114,14 @@ const Page = () => (
heading='Take a Quick Tour'
subheading='Prisma is the perfect companion for building web APIs. It saves repetitive CRUD boilerplate and provides a flexible API for common use cases such as pagination and filtering.'
image={
<AspectRatioBox minW='400px' w='600px' ratio={5/3}>
<AspectRatioBox minW='400px' w='600px' ratio={5 / 3}>
<Box
borderRadius='10px'
shadow='lg'
as='iframe'
title='video'
// @ts-ignore
src="https://www.youtube.com/embed/0RhtQgIs-TE"
src='https://www.youtube.com/embed/0RhtQgIs-TE'
allowFullScreen
/>
</AspectRatioBox>

+ 9
- 1
website/pages/demos/quovery.tsx View File

@ -18,7 +18,15 @@ import {
EmailForm,
Countdown,
} from 'landing-blocks/src'
import { Box, Stack, Image } from '@chakra-ui/core'
import { Image } from '@chakra-ui/core'
import {
Box,
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
import { MailchimpForm } from 'landing-blocks/src/EmailForm'
const Page = () => (

+ 2
- 1
website/pages/demos/rocketchat.tsx View File

@ -16,7 +16,8 @@ import {
SectionTitle,
Button,
} from 'landing-blocks/src'
import { Box, Stack, Image } from '@chakra-ui/core'
import { Image } from '@chakra-ui/core'
import { MailchimpForm } from 'landing-blocks/src/EmailForm'
const Page = () => (

+ 9
- 1
website/pages/demos/segment.tsx View File

@ -1,4 +1,12 @@
import { Image, Box, Stack } from '@chakra-ui/core'
import { Image, } from '@chakra-ui/core'
import {
Box,
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
import { PatternBackground } from 'landing-blocks/src/PatternBackground'
import {
Banner,

+ 41
- 32
website/pages/docs/components/hero.mdx View File

@ -1,16 +1,23 @@
export const breadcrumbs = ['Components', 'Hero']
import { Playground } from 'dokz'
import {
Hero,
Button,
NavBar,
Heading,
LandingProvider,
} from 'landing-blocks/src'
import { GradientRect } 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 is how you can use the Hero component
```js
```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.'
@ -24,35 +31,37 @@ here is how you can use the Hero component
The following example recreates the datoCMS landing page
```jsx live=true iframe=true
<LandingProvider primary='#FF593D'>
<NavBar
logo={<img width='120px' src='/datocms/logo.svg' />}
navs={[
<a>Why DatoCMS</a>,
<a>Learn</a>,
<a>Marketplace</a>,
<a>Pricing</a>,
<Button>try for free!</Button>,
]}
/>
<Hero
heading={
<Heading
fontFamily='tiempos-headline, Georgia'
fontSize='74px'
fontWeight='bold'
>
The best companies are built on unified content
</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.'
image={null}
cta={<Button>Try it now for free!</Button>}
floatingElement={<GradientRect maxW='pageContainer' distortion={0.3} />}
/>
</LandingProvider>
```
<Playground>
<LandingProvider primary='#FF593D'>
<NavBar
logo={<img width='120px' src='/datocms/logo.svg' />}
navs={[
<a>Why DatoCMS</a>,
<a>Learn</a>,
<a>Marketplace</a>,
<a>Pricing</a>,
<Button>try for free!</Button>,
]}
/>
<Hero
heading={
<Heading
fontFamily='tiempos-headline, Georgia'
fontSize='74px'
fontWeight='bold'
>
The best companies are built on unified content
</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.'
image={null}
cta={<Button>Try it now for free!</Button>}
floatingElement={
<GradientRect maxW='pageContainer' distortion={0.3} />
}
/>
</LandingProvider>
</Playground>
## Example on dark background

+ 8
- 1
website/pages/docs/index.mdx View File

@ -2,7 +2,14 @@
name: Introduction
---
import { Stack } from '@chakra-ui/core'
import {
Box,
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
import { HeadingLogoIcon } from '../_app'
<Stack align='center' my='40px'>

+ 29
- 10
website/pages/index.tsx View File

@ -23,7 +23,15 @@ import {
Section,
} from 'landing-blocks/src'
import { Faded } from 'baby-i-am-faded'
import { Box, Stack, Image, Button, Flex, Text, Link } from '@chakra-ui/core'
import { Image, Button, Text, Link } from '@chakra-ui/core'
import {
Box,
BoxProps,
Flex,
Stack,
FlexProps,
StackProps,
} from 'layout-kit-react'
import * as landingCards from '../svgs/landingCards'
import { IndexCardsPaths, demosPaths } from '../constants'
@ -35,18 +43,30 @@ const BG_IMG = 'linear-gradient(281deg, #a18aaf 0%, #5e629d 100%)'
const Page = () => (
<LandingProvider primary='white'>
<Section py='100px' mt='-100px' spacing='60px' bg={BG} backgroundImage={BG_IMG}>
<Section
py='100px'
mt='-100px'
spacing='60px'
bg={BG}
backgroundImage={BG_IMG}
>
<NavBar
dark
logo={<HeadingLogoIcon width='220px' long />}
navs={[headingNavLinks]}
navs={headingNavLinks}
/>
<Hero
dark
bullet='NOW AVAILABLE ON NPM'
heading={<h1>Landing pages building blocks</h1>}
subheading='Build your landing page in minutes using composable react components'
image={<Box mr={['0', null, '-100px']} width='800px' as={HeroIllustration} />}
image={
<Box
mr={['0', null, '-100px']}
width='800px'
as={HeroIllustration}
/>
}
cta={
<NextLink href='/docs'>
<LandingButton animate>Read The Docs</LandingButton>
@ -170,9 +190,8 @@ export const LandingCardsLinks = ({ ...rest }) => {
width='auto'
justify='center'
alignSelf='center'
flexDirection='row'
direction='row'
flexWrap='wrap'
spacing='40px'
flexGrow={0}
flex='0 0 auto'
{...rest}
@ -216,14 +235,14 @@ const DemosLinks = ({ ...rest }) => {
width='auto'
justify='center'
alignSelf='center'
flexDirection='row'
direction='row'
flexWrap='wrap'
spacing='40px'
// spacing='40px'
>
{demosPaths.map((k) => {
{demosPaths.map((k, i) => {
const { imagePath, urlPath } = k
return (
<Box key={urlPath}>
<Box mb='40px' key={urlPath}>
<Link href={urlPath}>
<Button
borderRadius='8px'

+ 8
- 8
yarn.lock View File

@ -3429,10 +3429,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.27:
version "1.0.27"
resolved "https://registry.yarnpkg.com/dokz/-/dokz-1.0.27.tgz#b3247b876217ca9c925191020103e558c663bc6f"
integrity sha512-wbJepf3wAA1q1rreHXH3v93oBh08h8dd9tiGIJm4zyIsaB4Jy1wE9t3Y7RbWTt5TSFPOysF+KVpVBxudod/u5w==
dokz@^1.0.28:
version "1.0.28"
resolved "https://registry.yarnpkg.com/dokz/-/dokz-1.0.28.tgz#3484650d529180b6bdfde2426da238ea22a7b9f4"
integrity sha512-6ZfPH9Ido+CS4WdMfe8PQSUvw2s6DZSzI06AJEagbGUkmeJMft6d4nBmkiP/z6cBQQPBMIZh15fhjxmGXY5Lnw==
dependencies:
"@babel/generator" "^7.10.2"
"@babel/parser" "^7.10.2"
@ -4921,10 +4921,10 @@ kind-of@^6.0.0, kind-of@^6.0.2:
resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
layout-kit-react@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/layout-kit-react/-/layout-kit-react-0.0.3.tgz#467a3a295fc91907e4136492d5a44e25685118db"
integrity sha512-nqXKdZVY1F3f5FSxF+LVS4OKjluTcLw8aiCBpUp5h0/YMY42Xz73cuSuC/9utshqMugTnkF8ryrJlQz5mnTm9g==
layout-kit-react@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/layout-kit-react/-/layout-kit-react-0.1.1.tgz#6663471c37c65e855e7da2190fcdcb4252684c60"
integrity sha512-dZD7jTl+PDaKSJuYzfPiUF1EgBcjh+JTFrrbfhjEGPPi/48qgeZ349hYAWRpsTvVFgJM7pgYAHKMAExE52HN/g==
dependencies:
"@emotion/styled" "^10.0.27"
"@styled-system/css" "^5.1.5"

Loading…
Cancel
Save