Browse Source

core/src: responsive hero

pull/1/head
remorses 1 year ago
parent
commit
4bda6791be
2 changed files with 17 additions and 5 deletions
  1. +16
    -4
      core/src/Hero.tsx
  2. +1
    -1
      core/src/layout.tsx

+ 16
- 4
core/src/Hero.tsx View File

@ -14,8 +14,18 @@ export const Hero = ({
...rest
}) => (
<PageContainer {...rest}>
<Row justify='flex-start' w='100%'>
<Stack spacing='30px' maxW='500px'>
<Row
justify='flex-start'
w='100%'
flexDir={{ sm: 'column', lg: 'row' }}
align='center'
>
<Stack
maxW={{ sm: 'none', lg: '500px' }}
spacing='30px'
align={{sm: 'center', lg: 'flex-start'}}
textAlign={{ sm: 'center', lg: 'left' }}
>
<Bullett>{bullett}</Bullett>
<Heading fontSize='46px'>{heading}</Heading>
<SubHeading fontSize='22px'>{subhead}</SubHeading>
@ -25,8 +35,10 @@ export const Hero = ({
</Button>
</Col>
</Stack>
<Box ml='40px' flex='1' />
<Col maxW='500px'>{image}</Col>
<Box ml='40px' mt='40px' flex='1' />
<Col align='center' maxW={{ sm: 'none', lg: '500px' }}>
{image}
</Col>
</Row>
</PageContainer>
)

+ 1
- 1
core/src/layout.tsx View File

@ -17,7 +17,7 @@ export const Spacer = ({ x = '0px', y = '0px' }) => {
export const PageContainer: FC<FlexProps> = ({ children, ...props }) => {
return (
<Col width='100%' align='center' {...props}>
<Col w='100%' maxW='pageContainer'>
<Col px='20px' w='100%' maxW='pageContainer'>
{children}
</Col>
</Col>

Loading…
Cancel
Save