forked from Sage-Bionetworks/synapse-web-monorepo
-
Notifications
You must be signed in to change notification settings - Fork 0
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 Sage-Bionetworks#1232 from jay-hodgson/SWC-7087
SWC-7087: add Synapse Plans Page
- Loading branch information
Showing
10 changed files
with
272 additions
and
83 deletions.
There are no files selected for viewing
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
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
29 changes: 29 additions & 0 deletions
29
packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.stories.ts
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,29 @@ | ||
| import { Meta, StoryObj } from '@storybook/react' | ||
| import { SynapsePlansPage } from './SynapsePlansPage' | ||
| import { fn } from '@storybook/test' | ||
|
|
||
| const meta = { | ||
| title: 'Synapse/HomePage', | ||
| component: SynapsePlansPage, | ||
| parameters: { | ||
| chromatic: { viewports: [600, 1200] }, | ||
| }, | ||
| } satisfies Meta | ||
| export default meta | ||
| type Story = StoryObj<typeof meta> | ||
|
|
||
| export const DemoPlansPage: Story = { | ||
| args: { | ||
| gotoPlace: (_href: string) => fn(), | ||
| }, | ||
| parameters: { | ||
| stack: 'production', | ||
| design: { | ||
| type: 'figma', | ||
| url: 'https://www.figma.com/design/7VDfcWetBp5UOENeH50Lzv/Managed-Plan-Scenarios?node-id=1-5840&node-type=frame&m=dev', | ||
| }, | ||
| msw: { | ||
| handlers: [], | ||
| }, | ||
| }, | ||
| } |
113 changes: 113 additions & 0 deletions
113
packages/synapse-react-client/src/components/SynapseHomepageV2/SynapsePlansPage.tsx
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,113 @@ | ||
| import React from 'react' | ||
| import { Box, Button, Typography } from '@mui/material' | ||
| import { SynapsePlans } from './SynapsePlans' | ||
| import { SynapseHomepageNavBar } from './SynapseHomepageNavBar' | ||
| import { h2Sx, homepageBodyText } from './SynapseHomepageV2' | ||
|
|
||
| export type SynapsePlansPageProps = { | ||
| gotoPlace: (href: string) => void | ||
| } | ||
|
|
||
| export const SynapsePlansPage: React.FunctionComponent< | ||
| SynapsePlansPageProps | ||
| > = ({ gotoPlace }) => { | ||
| return ( | ||
| <Box sx={{ overflow: 'hidden' }}> | ||
| <Box | ||
| sx={{ | ||
| boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.15)', | ||
| }} | ||
| > | ||
| <SynapseHomepageNavBar gotoPlace={gotoPlace} /> | ||
| </Box> | ||
|
|
||
| <Box | ||
| sx={{ | ||
| textAlign: 'center', | ||
| p: { | ||
| xs: '30px', | ||
| lg: '64px 0px', | ||
| }, | ||
| }} | ||
| > | ||
| <Box sx={{ maxWidth: '900px', m: 'auto' }}> | ||
| <Typography variant="headline1" sx={h2Sx}> | ||
| Explore Synapse plans | ||
| </Typography> | ||
| <Typography | ||
| variant="body1" | ||
| sx={{ | ||
| ...homepageBodyText, | ||
| pt: { | ||
| xs: '20px', | ||
| md: '48px', | ||
| }, | ||
| }} | ||
| > | ||
| Sage offers multiple service plans to help you with your data | ||
| sharing needs including NIH Data Management and Sharing plans. | ||
| </Typography> | ||
| </Box> | ||
| <Box sx={{ py: { xs: '30px', md: '60px' } }}> | ||
| <SynapsePlans /> | ||
| </Box> | ||
| </Box> | ||
| <Box | ||
| sx={{ | ||
| textAlign: 'center', | ||
| p: { | ||
| xs: '40px', | ||
| lg: '60px 0px', | ||
| }, | ||
| backgroundColor: '#172430', | ||
| }} | ||
| > | ||
| <Box sx={{ maxWidth: '780px', m: 'auto' }}> | ||
| <Typography | ||
| variant="headline1" | ||
| sx={{ | ||
| fontSize: { xs: '32px', md: '40px' }, | ||
| fontWeight: 600, | ||
| color: 'white', | ||
| lineHeight: { xs: '34px', md: '45px' }, | ||
| }} | ||
| > | ||
| Synapse gives you the tools to make your data discoverable | ||
| </Typography> | ||
| </Box> | ||
| <Box sx={{ maxWidth: '900px', m: 'auto' }}> | ||
| <Typography | ||
| variant="body1" | ||
| sx={{ | ||
| ...homepageBodyText, | ||
| color: 'white', | ||
| pt: '48px', | ||
| pb: '44px', | ||
| }} | ||
| > | ||
| Working on a grant proposal? Curious about what Synapse can do for | ||
| you? Learn more about our plans and see which one is right for you. | ||
| </Typography> | ||
| <Button | ||
| size="large" | ||
| variant="contained" | ||
| color="light" | ||
| href="https://sagebionetworks.jira.com/servicedesk/customer/portal/9" | ||
| target="_blank" | ||
| sx={{ | ||
| p: '5px 25px', | ||
| width: { | ||
| xs: '100%', | ||
| md: 'auto', | ||
| }, | ||
| }} | ||
| > | ||
| Contact us for more information | ||
| </Button> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export default SynapsePlansPage |
Oops, something went wrong.