-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #39 from vtexdocs/feature/vtex-io
Feature/VTEX IO Page Layout
- Loading branch information
Showing
10 changed files
with
326 additions
and
13 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,76 @@ | ||
| const VtexIOPage = () => { | ||
| return <h2>Vtex-IO</h2> | ||
| import Image from 'next/image' | ||
| import { useState } from 'react' | ||
| import { Box, Flex, Link, Text } from '@vtex/brand-ui' | ||
|
|
||
| import ContextProvider from 'utils/contexts/context' | ||
| import Sidebar from 'components/sidebar' | ||
|
|
||
| import { getMessages } from 'utils/get-messages' | ||
| import { resources } from 'utils/constants' | ||
|
|
||
| import image from '../../../../public/images/vtex-io.png' | ||
|
|
||
| import styles from 'styles/vtex-io' | ||
|
|
||
| const VTEXIOPage = () => { | ||
| const messages = getMessages() | ||
| const [sidebarSectionHidden, setSidebarSectionHidden] = useState(false) | ||
|
|
||
| return ( | ||
| <ContextProvider | ||
| sidebarSectionHidden={sidebarSectionHidden} | ||
| setSidebarSectionHidden={setSidebarSectionHidden} | ||
| > | ||
| <Flex sx={styles.container}> | ||
| <Sidebar sectionSelected="VTEX IO" /> | ||
| <Box sx={styles.mainContainer}> | ||
| <Box sx={styles.welcomeOuterContainer}> | ||
| <Flex sx={styles.welcomeInnerContainer}> | ||
| <Text sx={styles.welcomeText}> | ||
| {messages['vtex_io_page.title']} | ||
| </Text> | ||
| <Box sx={styles.welcomeImageOuterContainer}> | ||
| <Box sx={styles.welcomeImageInnerContainer}> | ||
| <Box sx={styles.welcomeImageGradient}></Box> | ||
| <Image src={image} /> | ||
| </Box> | ||
| </Box> | ||
| </Flex> | ||
| </Box> | ||
|
|
||
| <Box sx={styles.divider(sidebarSectionHidden)}></Box> | ||
|
|
||
| <Box sx={styles.contentContainer}> | ||
| <Text sx={styles.subtitle}> | ||
| {messages['vtex_io_page.subtitle']} | ||
| </Text> | ||
|
|
||
| <Box sx={styles.resourcesSectionContainer}> | ||
| <Text sx={styles.resourcesSectionTitle}> | ||
| {messages['vtex_io_page_other_resources.title']} | ||
| </Text> | ||
| <Box> | ||
| {resources.map((resource) => ( | ||
| <Box key={resource.title} sx={styles.resourceContainer}> | ||
| <Link | ||
| target="_blank" | ||
| href={resource.link} | ||
| sx={styles.resourceTitle} | ||
| > | ||
| {resource.title} | ||
| </Link> | ||
| <Text sx={styles.resourceDescription}> | ||
| {resource.description} | ||
| </Text> | ||
| </Box> | ||
| ))} | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| </Flex> | ||
| </ContextProvider> | ||
| ) | ||
| } | ||
|
|
||
| export default VtexIOPage | ||
| export default VTEXIOPage |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| import type { SxStyleProp } from '@vtex/brand-ui' | ||
|
|
||
| const container: SxStyleProp = { | ||
| pt: '5rem', | ||
| width: '100%', | ||
| backgroundColor: 'white', | ||
| } | ||
|
|
||
| const mainContainer: SxStyleProp = { | ||
| width: '100%', | ||
| } | ||
|
|
||
| const welcomeOuterContainer: SxStyleProp = { | ||
| overflow: 'hidden', | ||
| } | ||
|
|
||
| const welcomeInnerContainer: SxStyleProp = { | ||
| flexDirection: ['column-reverse', 'row'], | ||
| position: ['initial', 'relative'], | ||
| left: [ | ||
| 'initial', | ||
| 'calc(50% - 1194px / 2 + 325px)', | ||
| 'calc(50% - 1194px / 2 + 325px)', | ||
| 'calc(50% - 1194px / 2 + 325px)', | ||
| 'calc(50% - 1280px / 2 + 280px)', | ||
| 'calc(50% - 1213px / 2 + 247px)', | ||
| ], | ||
| justifyContent: 'space-between', | ||
| alignItems: ['center', 'initial'], | ||
| } | ||
|
|
||
| const welcomeText: SxStyleProp = { | ||
| boxSizing: 'initial', | ||
| maxWidth: ['324px', 'initial'], | ||
| width: ['auto', '345px', '345px', '345px', '345px', '720px'], | ||
| textAlign: ['center', 'initial'], | ||
| fontSize: ['20px', '28px'], | ||
| lineHeight: ['30px', '38px'], | ||
| fontWeight: '400', | ||
| color: '#4A4A4A', | ||
| position: ['initial', 'absolute'], | ||
| pt: ['initial', '115px'], | ||
| px: ['18px', 'initial'], | ||
| mt: ['32px', 'initial'], | ||
| } | ||
|
|
||
| const welcomeImageOuterContainer: SxStyleProp = { | ||
| width: '100%', | ||
| overflow: 'hidden', | ||
| } | ||
|
|
||
| const welcomeImageInnerContainer: SxStyleProp = { | ||
| position: 'relative', | ||
| mx: ['auto', 'initial'], | ||
| left: ['initial', '308px', '308px', '308px', '339px', '621px', '863px'], | ||
| top: ['-92px', '-122px'], | ||
| width: ['360px', '592px'], | ||
| height: ['128px', '222px'], | ||
| } | ||
|
|
||
| const welcomeImageGradient: SxStyleProp = { | ||
| zIndex: 1, | ||
| width: '100%', | ||
| height: '100%', | ||
| position: 'absolute', | ||
| top: ['92px', '122px'], | ||
| background: [ | ||
| 'linear-gradient(180deg, rgba(255, 255, 255, 0) -3.42%, #FFFFFF 103.17%)', | ||
| 'linear-gradient(47.76deg, #FFFFFF -41.03%, rgba(255, 255, 255, 0) 28.93%)', | ||
| ], | ||
| } | ||
|
|
||
| const divider: (sidebarSectionHidden: boolean) => SxStyleProp = ( | ||
| sidebarSectionHidden | ||
| ) => ({ | ||
| margin: 0, | ||
| padding: 0, | ||
| float: 'right', | ||
| borderWidth: 0, | ||
| borderBottom: '1px solid #E7E9EE', | ||
| transition: 'width 0.3s ease-in-out', | ||
| width: [ | ||
| 0, | ||
| '100%', | ||
| '100%', | ||
| `calc(100vw - 72px - ${sidebarSectionHidden ? 24 : 300}px)`, | ||
| ], | ||
| }) | ||
|
|
||
| const contentContainer: SxStyleProp = { | ||
| mx: 'auto', | ||
| mt: ['16px', '32px'], | ||
| mb: ['32px', '64px'], | ||
| px: ['18px', 'initial'], | ||
| maxWidth: ['324px', 'initial'], | ||
| width: ['auto', '544px', '544px', '544px', '720px'], | ||
| boxSizing: 'initial', | ||
| } | ||
|
|
||
| const subtitle: SxStyleProp = { | ||
| textAlign: ['center', 'initial'], | ||
| fontSize: ['16px', '18px'], | ||
| lineHeight: ['22px', '24px'], | ||
| fontWeight: '400', | ||
| color: '#4A4A4A', | ||
| } | ||
|
|
||
| const resourcesSectionContainer: SxStyleProp = { | ||
| mt: '24px', | ||
| } | ||
|
|
||
| const resourcesSectionTitle: SxStyleProp = { | ||
| fontSize: ['18px', '22px'], | ||
| lineHeight: ['30px', '32px'], | ||
| fontWeight: '400', | ||
| color: '#4A4A4A', | ||
| } | ||
|
|
||
| const resourceContainer: SxStyleProp = { | ||
| mt: '24px', | ||
| fontSize: '16px', | ||
| fontWeight: '400', | ||
| lineHeight: '22px', | ||
| } | ||
|
|
||
| const resourceTitle: SxStyleProp = { | ||
| color: '#E31C58', | ||
| } | ||
|
|
||
| const resourceDescription: SxStyleProp = { | ||
| mt: '8px', | ||
| color: '#4A4A4A', | ||
| } | ||
|
|
||
| export default { | ||
| container, | ||
| mainContainer, | ||
| welcomeOuterContainer, | ||
| welcomeInnerContainer, | ||
| welcomeText, | ||
| welcomeImageOuterContainer, | ||
| welcomeImageInnerContainer, | ||
| welcomeImageGradient, | ||
| divider, | ||
| contentContainer, | ||
| subtitle, | ||
| resourcesSectionContainer, | ||
| resourcesSectionTitle, | ||
| resourceContainer, | ||
| resourceTitle, | ||
| resourceDescription, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.