Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CTDC-906 (Home page - main section) #11

Merged
merged 2 commits into from
Aug 24, 2023
Merged

CTDC-906 (Home page - main section) #11

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fffbe0a
update Home Page
Nahomtes Aug 23, 2023
5fb2d16
remove unused CSS
Nahomtes Aug 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 41 additions & 200 deletions src/pages/landing/landingView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,36 +45,22 @@ const LandingController = ({ classes, heroData }) => (
<div className={classes.container}>
<div className={classes.texture}>
<Grid container spacing={16} direction="row" className={classes.landingContainer}>
<div className={classes.contentLeft}>
<div className={classes.about}>
<div className={classes.aboutImageSection}>
<img src={imgAbout} className={classes.aboutImage} alt="CTDC about" />
</div>
<div className={classes.CTDCWords}>
About the Clinical Trial Data Commons (CTDC)
</div>
<div className={classes.aboutContent}>
CTDC has been established to allow researchers to search, explore and select data
across
clinical trials from the Precision Medicine Initiative. Data in the CTDC is sourced
from multiple different programs and projects; all are focused on human subjects
and the data files are access controlled. As part of the NCI's Cancer Research Data
Commons (CRDC),
user selected data files are available for analysis in the CRDC's Cloud Resources.

</div>
<div className={classes.aboutButtonSection}>
<div className={classes.aboutButtonLeft}>
<img src={iconAbout} className={classes.iconAbout} alt="CTDC about icon" />
</div>
<div className={classes.aboutButtonRight}>
<Link to="/purpose" className={classes.aboutButton}>READ MORE</Link>
</div>
<div className={classes.mainLanding}>
<div className={classes.contentRightTop}>
<div className={classes.aboutContainer}>
<Link to='/purpose' className={classes.link}>
<div className={classes.CTDCHeader}>
About the Clinical Trial Data Commons <span className={classes.CTDCWords}>(CTDC)</span>
</div>
<div className={classes.aboutContent}>
The Clinical Trial Data Commons (CTDC) was established to allow expanded access to,
and exploration of, data collected from NCI-sponsored clinical trials to advance
cancer research. The CTDC is part of NCI's Cancer Research Data Commons (CRDC).
</div>
</Link>
</div>
</div>
</div>
<div className={classes.contentRight}>
<div className={classes.contentRightTop}>
<div className={classes.contentRightBottom}>
<div className={classes.program}>
<div className={classes.programImg}>
<img className={classes.image} src={imgTrial} alt="CTDC Trials" />
Expand All @@ -88,11 +74,11 @@ const LandingController = ({ classes, heroData }) => (
</div>
<div className={classes.blueButton}>
<div className={classes.blueButtonLeft}>
<img className={classes.icon} src={icon} alt="CTDC about " />
<img className={classes.icon} src={icon} alt="CTDC Trials" />
{' '}
</div>
<div className={classes.blueButtonRight}>
<Link to="/trials" className={classes.blueButton}>EXPLORE</Link>
<Link to="/trial/NCT04314401" className={classes.blueButton}>GO TO TRIALS LISTING</Link>
</div>
</div>
</div>
Expand All @@ -101,10 +87,9 @@ const LandingController = ({ classes, heroData }) => (
<img className={classes.image} src={imgAccess} alt="CTDC Request ACCESS " />
</div>
<div className={classes.content}>
<div className={classes.contentHeader}> REQUEST ACCESS</div>
<div className={classes.contentHeader}> EXPLORE DATA</div>
<div className={classes.contentContainer}>
Data and files in CTDC are not open access,
they require users to have permission.
Search and explore trial data
</div>

</div>
Expand All @@ -114,31 +99,13 @@ const LandingController = ({ classes, heroData }) => (
{' '}
</div>
<div className={classes.blueButtonRight}>
<Link to="/request-access" className={classes.blueButton}>READ MORE</Link>
<Link to="/explore" className={classes.blueButton}>START THE PROCESS</Link>
</div>
</div>
</div>

</div>
<div className={classes.contentRightBottom}>
<div className={classes.cases}>
<div className={classes.greyContentHeader}> Cases</div>
<div className={classes.greyContent}>
Search all the Cases and build cohorts from all the
Programs/Studies within the CTDC. The data files from
these cohorts can then be analyzed in the Cloud Resources.
</div>
<div className={classes.greybuttonSection}>
<div className={classes.blueButtonLeft}>
<img className={classes.greyIcon} src={icon} alt="CTDC about " />
{' '}
</div>
<div className={classes.blueButtonRight}>
<Link to="/explore" className={classes.greybutton}>Explore</Link>
</div>
</div>
</div>
</div>

</div>
</Grid>
</div>
Expand Down Expand Up @@ -194,9 +161,7 @@ const styles = () => ({
container: {
fontFamily: 'Raleway, sans-serif',
margin: '0 auto',

},

bannerTexture: {
color: '#4898B4',
fontFamily: 'Raleway',
Expand Down Expand Up @@ -229,31 +194,6 @@ const styles = () => ({
textTransform: 'uppercase',
letterSpacing: '0.8px',
},
headerTitle: {
paddingTop: '180px',
paddingBottom: '12px',
width: '208px',
color: '#FFFFFF',
fontFamily: 'Raleway, sans-serif',
fontSize: '40px',
fontWeight: 'bold',
lineHeight: '40px',

},
paddingLeft50: {
paddingLeft: '50px',
},
headerContent: {
height: '98px',
width: '194px',
color: '#CB8311',
fontFamily: 'Raleway',
fontSize: '16px',
fontWeight: '500',
lineHeight: '22px',
marginBottom: '40px',
},

iconAbout: {
height: '17px',
width: '9px',
Expand All @@ -265,32 +205,34 @@ const styles = () => ({
marginTop: '13px',
marginLeft: '23px',
},

mainLanding: {
maxWidth: '596px'
},
aboutImage: {
width: '300px',
padding: '14px',
},
aboutImageSection: {
},
CTDCWords: {
height: '188px',
background: '#0B2731',
CTDCHeader: {
height: '87px',
background: '#067CA5',
color: '#FFFFFF',
fontSize: '26px',
fontWeight: '400',
textTransform: 'uppercase',
lineHeight: '29px',
padding: '24px 75px 26px 26px',
lineHeight: '27px',
padding: '30px 20px 30px 20px',
fontFamily: 'Oswald',
textAlign: 'center',
},
CTDCWords: {
fontWeight: '300',
fontSize: '24px',
},
landingContainer: {
alignItems: 'center',
justifyContent: 'center',
paddingLeft: '15px',
},
contentLeft: {
float: 'left',
paddingRight: '10px',
},
about: {
width: '300px',
backgroundColor: '#20506A',
Expand All @@ -300,51 +242,22 @@ const styles = () => ({
height: '251px',
},
aboutContent: {
background: '#20506A',
minHeight: '372px',
width: '300px',
padding: '30px 30px 32px 30px',
background: '#004D73',
padding: '30px 20px 32px 20px',
color: '#fff',
fontFamily: '"Open Sans"',
fontSize: '14px',
lineHeight: '22px',
textAlign: 'center',
},
aboutButtonSection: {
background: '#20506A',
height: '71px',
},
imgIconAbout: {
width: '49px',
},
aboutButtonLeft: {
float: 'left',
background: '#C53B27',
height: '45px',
width: '48px',
},
aboutButtonRight: {
background: '#894439',
float: 'left',
height: '45px',
width: '132px',
},
aboutButton: {
color: '#ffffff',
link: {
textDecoration: 'none',
textTransform: 'uppercase',
fontSize: '12px',
fontWeight: '600',
lineHeight: '45px',
paddingLeft: '20px',
boxShadow: 'none',
},

content: {
width: '100%',
background: '#fff',
paddingLeft: '30px',
paddingTop: '6px',
minHeight: '130px',
minHeight: '116px',
},
contentHeader: {
color: '#20506A',
Expand Down Expand Up @@ -375,26 +288,8 @@ const styles = () => ({
studies: {
float: 'left',
},

contentRightBottom: {
float: 'left',
width: '597px',
background: '#fff',
backgroundImage: `url(${l9dg})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
},
cases: {
height: '438px',
paddingLeft: '370px',
paddingTop: '70px',
},
greybuttonSection: {
height: '46px',
width: '176px',
backgroundColor: '#20506A',
marginTop: '20px',

aboutContainer: {
paddingBottom: '10px',
},
blueButton: {
height: '45px',
Expand All @@ -416,62 +311,8 @@ const styles = () => ({
color: '#fff',
textTransform: 'uppercase',
},
greyContentHeader: {
color: '#20506A',
fontFamily: 'Oswald',
fontSize: '31px',
fontWeight: '500',
lineHeight: '32px',
padding: '15px 0',
textTransform: 'uppercase',
},
greyContent: {
height: '173px',
width: '166px',
color: '#010101',
fontFamily: 'Lato',
fontSize: '15px',
lineHeight: '22px',
},
greyIcon: {
width: '20px',
marginTop: '15px',
marginLeft: '28px',
},
greybutton: {
padding: '15px 5px 0 0',
height: '9px',
width: '71px',
color: '#FFFFFF',
fontFamily: 'Raleway',
fontSize: '12px',
fontWeight: '600',
lineHeight: '19.31px',
textDecoration: 'none',
marginLeft: '8px',
'&:hover': {
color: '#ffffff',
},
},
paddingBottom50: {
paddingBottom: '50px',
},
paddingTop30: {
paddingTop: '30px',
},
bannerTextureContainer: {
paddingTop: '30px',
},
animationContainer: {
position: 'relative',
height: '800px',
maxHeight: '800px',
overflow: 'hidden',
},

paddingLeft2: {
paddingLeft: '2px',
},

});
export default withStyles(styles, { withTheme: true })(LandingController);