Browse Source

refactor how it works

master
remorses 9 months ago
parent
commit
b05d1bfea6
2 changed files with 11 additions and 12 deletions
  1. +7
    -11
      landing-blocks/src/HowItWorks.tsx
  2. +4
    -1
      website/pages/demo_roll/[name].tsx

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

@ -1,9 +1,9 @@
import { Box, Stack } from 'layout-kit-react'
import React, { ReactNode } from 'react'
import { Heading } from './Heading'
import { useFaded } from './hooks'
import { Col, PageContainer, PageContainerProps } from './layout'
import { Subheading } from './Subheading'
import { useFaded } from './hooks'
import { PageContainer, PageContainerProps } from './layout'
export type HowItWorksProps = {
heading?: ReactNode
@ -81,11 +81,7 @@ const Step = ({
{...rest}
>
<Stack as={Faded} minW='300px' maxW='500px' flex='1' spacing='40px'>
<Stack
direction='row'
align='flex-end'
opacity={0.3}
>
<Stack direction='row' align='flex-end' opacity={0.3}>
<Box opacity={0.5} lineHeight='60px' fontSize='80px'>
{number}
</Box>
@ -95,7 +91,8 @@ const Step = ({
fontWeight='bold'
fontSize='text'
>
{'. ' + (decorativeHeading || heading)}
<Box d='inline' mx='0.6em' children={' . '} />
{decorativeHeading || heading}
</Heading>
</Stack>
<Subheading opacity={0.8} fontWeight='medium'>
@ -105,7 +102,6 @@ const Step = ({
<Box
maxW='400px'
fontWeight='medium'
lineHeight='1.8em'
opacity={0.5}
fontSize='subtext'
@ -113,9 +109,9 @@ const Step = ({
{subheading}
</Box>
</Stack>
<Col as={Faded} minW='300px' maxW='500px' flex='1'>
<Box as={Faded} minW='300px' maxW='500px' flex='1'>
{image}
</Col>
</Box>
</Stack>
)
}

+ 4
- 1
website/pages/demo_roll/[name].tsx View File

@ -4,9 +4,11 @@ import Iframe from 'react-iframe'
import { BuyDemosButton } from '..'
import { DEMOS_WEBSITE, headingNavLinks } from '../../constants'
import { Spinner } from '@chakra-ui/core'
import { useState } from 'react'
export default function Page({}) {
const { query } = useRouter()
const [loaded, setLoaded] = useState(false)
const name = query.name
return (
<LandingProvider
@ -35,7 +37,7 @@ export default function Page({}) {
h='100%'
align='flex-start'
>
{!name ? (
{!name || !loaded ? (
<Stack align='center' justify='center'>
<Spinner />
</Stack>
@ -44,6 +46,7 @@ export default function Page({}) {
url={`${DEMOS_WEBSITE}/demos/${name}`}
width='100%'
height='100%'
onLoad={() => setLoaded(true)}
// display='initial'
position='relative'
/>

Loading…
Cancel
Save