Browse Source

made nav and pagecontainer

pull/1/head
remorses 1 year ago
parent
commit
95e73fed0a
7 changed files with 87 additions and 60 deletions
  1. +25
    -13
      core/src/Feature.tsx
  2. +8
    -45
      core/src/Hero.tsx
  3. +21
    -0
      core/src/NavBar.tsx
  4. +10
    -1
      core/src/index.tsx
  5. +9
    -1
      core/src/layout.tsx
  6. +11
    -0
      demos/pages/index.tsx
  7. +3
    -0
      demos/public/logo.svg

+ 25
- 13
core/src/Feature.tsx View File

@ -1,6 +1,6 @@
import { Heading as H, HeadingProps, Stack, Box } from '@chakra-ui/core'
import React, { FC } from 'react'
import { Col, Row, Heading, Spacer } from '.'
import { Col, Row, Heading, Spacer, PageContainer } from '.'
import { Text } from '@chakra-ui/core'
export const Feature = ({
@ -12,17 +12,29 @@ export const Feature = ({
}) => {
const dir = flip ? 'row-reverse' : 'row'
return (
<Row flexDir={dir} py='120px' bg={backgroundColor}>
<Stack spacing={8} flex='1'>
<Heading lineHeight='50px' fontWeight='medium' fontSize='36px'>
{heading}
</Heading>
<Text lineHeight='34px' m={0} opacity={0.6} fontWeight='normal' fontSize='18px'>
{subhead}
</Text>
</Stack>
<Box flex='0.1' />
<Col flex='1'>{image}</Col>
</Row>
<PageContainer py='120px' bg={backgroundColor}>
<Row flexDir={dir} >
<Stack spacing={8} flex='1'>
<Heading
lineHeight='50px'
fontWeight='medium'
fontSize='36px'
>
{heading}
</Heading>
<Text
lineHeight='34px'
m={0}
opacity={0.6}
fontWeight='normal'
fontSize='18px'
>
{subhead}
</Text>
</Stack>
<Box flex='0.1' />
<Col flex='1'>{image}</Col>
</Row>
</PageContainer>
)
}

+ 8
- 45
core/src/Hero.tsx View File

@ -3,59 +3,22 @@ import { Image, Flex, Box, Stack } from '@chakra-ui/core'
import { SubHeading } from './SubHeading'
import { Heading } from './Heading'
import { Button } from './Button'
import { Col, Row, Spacer } from './layout'
import { Col, Row, Spacer, PageContainer } from './layout'
export const Hero = ({
bg = 'white',
heading,
subhead,
cta,
image,
backgroundImage = null,
bgOpacity = 1,
style = {},
...props
}) => (
<Box display='relative'>
{backgroundImage && (
<Box
display='absolute'
top={0}
right={0}
bottom={0}
left={0}
zIndex={-2}
style={{ height: '100%' }}
>
<Image
src={backgroundImage}
alt=''
width={1}
style={{ height: '100%', objectFit: 'cover' }}
/>
</Box>
)}
<Box
top={0}
right={0}
bottom={0}
left={0}
zIndex={-1}
bg={bg}
style={{ opacity: backgroundImage ? bgOpacity : 1, height: '100%' }}
/>
<Row {...props} justify='center' align='flex-start'>
<Stack spacing={4} maxW='500px'>
export const Hero = ({ heading, subhead, cta, image }) => (
<PageContainer>
<Row justify='flex-start' w='100%'>
<Stack spacing='30px' maxW='500px'>
<Heading fontSize='46px'>{heading}</Heading>
<SubHeading fontSize='22px'>{subhead}</SubHeading>
<Col align={['center', 'center', 'flex-start']}>
<Button bg='primary' d='block' width='auto'>
<Button px='40px' bg='primary' d='block' width='auto'>
{cta}
</Button>
</Col>
</Stack>
<Box ml='40px' />
<Box ml='40px' flex='1' />
<Col maxW='500px'>{image}</Col>
</Row>
</Box>
</PageContainer>
)

+ 21
- 0
core/src/NavBar.tsx View File

@ -0,0 +1,21 @@
import { Heading as H, HeadingProps, Stack, Box } from '@chakra-ui/core'
import React, { FC } from 'react'
import { Col, Row, Heading, Spacer } from '.'
import { Text } from '@chakra-ui/core'
import { SubHeading } from './SubHeading'
export const NavBar = ({ logo, navs }) => {
return (
<Row py='40px'>
<Box alignSelf='flexStart'>{logo}</Box>
<Box flex='1' />
<Stack isInline spacing='20px'>
{navs.map((x) => (
<Box fontSize='16px' fontWeight='medium'>
{x}
</Box>
))}
</Stack>
</Row>
)
}

+ 10
- 1
core/src/index.tsx View File

@ -5,14 +5,17 @@ export { SubHeading } from './SubHeading'
export { Feature } from './Feature'
export { HowItWorks } from './HowItWorks'
export { FeaturesList } from './FeaturesList'
export { NavBar } from './NavBar'
export * from './layout'
import {
ThemeProvider,
theme as defaultTheme,
DefaultTheme,
Stack,
CSSReset,
} from '@chakra-ui/core'
import { useTheme } from 'emotion-theming'
import { Col } from './layout'
export const LandingProvider = ({ children }) => {
const existingTheme = useTheme()
@ -26,14 +29,20 @@ export const LandingProvider = ({ children }) => {
...defaultTheme.colors,
primary: 'purple',
} as any,
sizes: {
...defaultTheme.sizes,
pageContainer: '1200px',
} as any,
fonts: {
...defaultTheme.fonts,
body: 'Roboto',
heading: 'Roboto',
},
}
return (
<ThemeProvider theme={theme}>
<Stack spacing={24}>{children}</Stack>
<CSSReset />
<Stack spacing={24} >{children}</Stack>
</ThemeProvider>
)
}

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

@ -14,4 +14,12 @@ export const Spacer = ({ x = '0px', y = '0px' }) => {
return <Box mt={y} ml={x} />
}
export {Divider} from '@chakra-ui/core'
export const PageContainer: FC<FlexProps> = ({ children, ...props }) => {
return (
<Col width='100%' align='center' {...props}>
<Col w='100%' align='flex-start' maxW='pageContainer'>{children}</Col>
</Col>
)
}
export { Divider } from '@chakra-ui/core'

+ 11
- 0
demos/pages/index.tsx View File

@ -10,10 +10,21 @@ import {
Feature,
HowItWorks,
FeaturesList,
NavBar,
} from 'react-landing/src'
const Page = () => (
<LandingProvider>
<NavBar
logo={<img width='120px' src='logo.svg' />}
navs={[
<a>Features</a>,
<a>Use Cases</a>,
<a>Pricing</a>,
<a>About Us</a>,
<a>Login</a>,
]}
/>
<Hero
heading='Make your website editable for the whole team'
subhead='Choose your technology. Use the API to fetch content. Empower

+ 3
- 0
demos/public/logo.svg
File diff suppressed because it is too large
View File


Loading…
Cancel
Save