-
Notifications
You must be signed in to change notification settings - Fork 67
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 #2414 from epam/feature/uui-site-new-start-page
New UUI landing
- Loading branch information
Showing
43 changed files
with
8,774 additions
and
74 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,50 @@ | ||
| @use '~@epam/assets/theme/theme_promo' as *; | ||
| @use '~@epam/promo/assets/styles/colors.scss' as *; | ||
|
|
||
| .layout { | ||
| .root { | ||
| display: flex; | ||
| background-color: #222222; | ||
| height: 60px; | ||
| justify-content: center; | ||
| flex-shrink: 0; | ||
| height: 240px; | ||
| padding: 0 18px; | ||
|
|
||
| :global { | ||
| @include theme-promo(); | ||
| } | ||
| .container { | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-basis: 1166px; | ||
| padding: 36px 0; | ||
|
|
||
| .footer { | ||
| max-width: 1200px; | ||
| width: 100%; | ||
| margin: 0 auto; | ||
| .first-block { | ||
| margin-top: 9px; | ||
| flex-basis: 50%; | ||
|
|
||
| :global(.uui-icon) { | ||
| padding-top: 3px; | ||
| } | ||
| .sponsor-text { | ||
| margin-top: 60px; | ||
| } | ||
|
|
||
| .copyright { | ||
| padding-left: 21px; | ||
| .bottom-links { | ||
| :global(.uui-text) { | ||
| padding-top: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 1280px) { | ||
| .footer { | ||
| max-width: 732px; | ||
| .second-block { | ||
| flex-basis: 50%; | ||
|
|
||
| .mail-button { | ||
| margin-top: 9px; | ||
| padding-inline-start: 18px; | ||
| padding-inline-end: 18px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 768px) { | ||
| .footer { | ||
| margin: 0 12px; | ||
| @media (max-width: 950px) { | ||
| & * { | ||
| max-width: fit-content; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .second-block { | ||
| display: none; | ||
| } | ||
| } | ||
| } |
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,25 +1,78 @@ | ||
| import * as React from 'react'; | ||
| import css from './AppFooter.module.scss'; | ||
| import { | ||
| FlexRow, Text, Anchor, IconContainer, | ||
| } from '@epam/uui'; | ||
| import { FlexRow, Text, Anchor, IconContainer, FlexCell, Button } from '@epam/uui'; | ||
| import { getCurrentTheme } from '../helpers'; | ||
| import { ReactComponent as EPAMIcon } from '../icons/EPAM.svg'; | ||
| import { ReactComponent as CommunicationMailFillIcon } from '@epam/assets/icons/communication-mail-fill.svg'; | ||
| import css from './AppFooter.module.scss'; | ||
|
|
||
| const EPAM_LINK = 'https://www.epam.com'; | ||
|
|
||
| export class AppFooter extends React.Component { | ||
| render() { | ||
| const footerLinks = { | ||
| resources: { caption: 'Resources', | ||
| links: [ | ||
| { href: 'https://uui.epam.com/documents', name: 'Docs' }, | ||
| { href: 'https://uui.epam.com/documents?category=components&id=accordion', name: 'Components' }, | ||
| { href: 'https://uui.epam.com/demo', name: 'Examples' }, | ||
| ] }, | ||
| links: { caption: 'Links', | ||
| links: [ | ||
| { href: 'https://www.figma.com/community/file/1380452603479283689/epam-uui-v5-7', name: 'Figma' }, | ||
| { href: 'https://github.com/epam/UUI', name: 'GitHub' }, | ||
| { href: 'https://uui.epam.com/documents?id=releaseNotes', name: 'Release notes' }, | ||
| ] }, | ||
| community: { caption: 'Community', | ||
| links: [ | ||
| { href: 'https://github.com/epam/UUI/discussions', name: 'Github Discussions' }, | ||
| { href: 'https://teams.microsoft.com/l/team/19%3Af9ce97808e1e419cb976f71d310ca74f%40thread.skype/conversations?groupId=726eb5c9-1516-4c6a-be33-0838d9a33b02&tenantId=b41b72d0-4e9f-4c26-8a69-f949f367c91d', name: 'Microsoft Teams' }, | ||
| { href: 'https://wearecommunity.io/communities/uui', name: 'We Are Community' }, | ||
| ] }, | ||
| }; | ||
|
|
||
| export function AppFooter() { | ||
| const theme = getCurrentTheme(); | ||
|
|
||
| const getLinks = ({ caption, links }: { caption: string, links: { href: string, name: string }[] }) => { | ||
| return ( | ||
| <div className={ css.layout }> | ||
| <FlexRow cx={ css.footer }> | ||
| <FlexCell width="auto"> | ||
| <Text color="white" fontWeight="600" fontSize="18">{ caption }</Text> | ||
| {links.map((link) => ( | ||
| <Anchor key={ link.href } href={ link.href } target="_blank"> | ||
| <Text color="white">{ link.name }</Text> | ||
| </Anchor> | ||
| ))} | ||
| </FlexCell> | ||
| ); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={ css.root } style={ { backgroundColor: theme === 'electric' ? 'var(--uui-neutral-95)' : 'var(--uui-neutral-90)' } }> | ||
| <div className={ css.container }> | ||
| <FlexCell cx={ css.firstBlock } grow={ 1 }> | ||
| <Anchor rawProps={ { tabIndex: -1, 'aria-label': 'EPAM' } } href={ EPAM_LINK } target="_blank"> | ||
| <IconContainer icon={ EPAMIcon } /> | ||
| </Anchor> | ||
| <Text color="secondary" fontSize="14" lineHeight="24" cx={ css.copyright }> | ||
| {`© ${new Date().getFullYear()} EPAM Systems. All Rights reserved`} | ||
| </Text> | ||
| </FlexRow> | ||
| <Text color="disabled" cx={ css.sponsorText }>Sponsored by EPAM Licensed under MIT License</Text> | ||
| <FlexRow columnGap={ 18 } cx={ css.bottomLinks }> | ||
| <Anchor href="/" target="_blank"> | ||
| <Text color="white">Privacy Policy</Text> | ||
| </Anchor> | ||
| <Anchor href="/" target="_blank"> | ||
| <Text color="white">Cookies Policy</Text> | ||
| </Anchor> | ||
| </FlexRow> | ||
| </FlexCell> | ||
| <FlexCell cx={ css.secondBlock } grow={ 1 }> | ||
| <FlexRow columnGap={ 48 } alignItems="top"> | ||
| <FlexCell width="auto"> | ||
| <Text color="white" fontWeight="600" fontSize="18">Have a question?</Text> | ||
| <Button href="mailto:[email protected]" cx={ css.mailButton } color="primary" caption="Contact us" icon={ CommunicationMailFillIcon } /> | ||
| </FlexCell> | ||
| {getLinks(footerLinks.resources)} | ||
| {getLinks(footerLinks.links)} | ||
| {getLinks(footerLinks.community)} | ||
| </FlexRow> | ||
| </FlexCell> | ||
| </div> | ||
| ); | ||
| } | ||
| </div> | ||
| ); | ||
| } |
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.