-
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.
Update Page for Start of 2023-2024 School Year (#368)
* Add initial active project data * Add conditional logic for displaying projects or coming soon box * Do same for Projects page * Update project card styling (and associated layout edits) * Update NPO images * Create new CurrentProjectSection component * Minort fix to use flex-start * Update apply page
- Loading branch information
1 parent
cdeaaeb
commit 047b29c
Showing
19 changed files
with
600 additions
and
468 deletions.
There are no files selected for viewing
56 changes: 56 additions & 0 deletions
56
website/src/app/components/CurrentProjectSection/CurrentProjectSection.jsx
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,56 @@ | ||
import React from 'react'; | ||
import { motion } from 'framer-motion'; | ||
import PropTypes from 'prop-types'; | ||
import ProjectCard from '../ProjectCard/ProjectCard'; | ||
import projectData from '../../views/our-work/projectsData'; | ||
import ctcLogo from '../../../images/logo/white-ctc.svg'; | ||
import { animationConfigs, animationStates, transitionConfigs } from '../../views/animationConstants'; | ||
|
||
import styles from './CurrentProjectSection.module.css'; | ||
|
||
const CurrentProjectSection = ({ | ||
background, title, footer, className, | ||
}) => { | ||
const test = ( | ||
<div className="ctc-ourwork-comingsoon-box"> | ||
<img className="ctc-ourwork-comingsoon-logo" src={ctcLogo} alt="" /> | ||
<p className="ctc-ourwork-comingsoon-p">Check back this Fall to see our upcoming projects!</p> | ||
</div> | ||
); | ||
return ( | ||
<section style={{ background }} className={`${styles['current-project-section']} ${className}`}> | ||
<motion.h1 | ||
className="ctc-home-3-header" | ||
variants={animationConfigs.transformY('-100%', '-100%')} | ||
transition={transitionConfigs.simple(0.75)} | ||
{...animationStates.whileInView(true)} | ||
> | ||
{title} | ||
</motion.h1> | ||
<div className={styles["ctc-home-3-projects-container"]}> | ||
{(projectData.active.length === 0) ? ( | ||
test | ||
) | ||
: projectData.active.map((p) => <ProjectCard key={p.projectName} {...p} />)} | ||
</div> | ||
<div className={styles['current-project-footer']}> | ||
{footer} | ||
</div> | ||
</section> | ||
); | ||
}; | ||
|
||
CurrentProjectSection.propTypes = { | ||
background: PropTypes.string, | ||
title: PropTypes.string.isRequired, | ||
footer: PropTypes.element, | ||
className: PropTypes.string, | ||
}; | ||
|
||
CurrentProjectSection.defaultProps = { | ||
background: 'rgba(0,0,0,0)', | ||
footer: null, | ||
className: '', | ||
}; | ||
|
||
export default CurrentProjectSection; |
145 changes: 145 additions & 0 deletions
145
website/src/app/components/CurrentProjectSection/CurrentProjectSection.module.css
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,145 @@ | ||
.current-project-section { | ||
height: auto; | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: space-evenly; | ||
} | ||
|
||
.ctc-home-3-header { | ||
text-align: center; | ||
color: var(--dark-pink); | ||
font-size: 48px; | ||
padding-top: 40px; | ||
margin-bottom: 50px; | ||
font-weight: 600; | ||
min-height: 5rem; | ||
} | ||
|
||
.ctc-home-3-projects-container { | ||
width: 85vw; | ||
height: auto; | ||
display: flex; | ||
justify-content: space-evenly; | ||
align-content: center; | ||
align-items: stretch; | ||
flex-wrap: wrap; | ||
gap: 1rem; | ||
} | ||
|
||
.ctc-ourwork-comingsoon-box { | ||
width: 554px; | ||
max-width: 85vw; | ||
height: 131px; | ||
background: var(--dark-purple); | ||
border-radius: 15px; | ||
display: flex; | ||
flex-direction: row; | ||
gap: 20px; | ||
justify-content: center; | ||
align-items: space-between; | ||
padding: 5px 15px; | ||
margin-bottom: 20px; | ||
align-self: center; | ||
} | ||
|
||
.ctc-ourwork-comingsoon-p { | ||
width: 400px; | ||
display: flex; | ||
align-items: center; | ||
color: #fff; | ||
font-family: 'Inter'; | ||
font-style: normal; | ||
font-weight: 400; | ||
font-size: 24px; | ||
line-height: 29px; | ||
} | ||
|
||
.ctc-ourwork-comingsoon-logo { | ||
width: 60px; | ||
height: auto; | ||
} | ||
|
||
.current-project-footer { | ||
min-height: 5rem; | ||
} | ||
|
||
/* @media screen and (max-width: 1400px) { | ||
.ctc-home-3-projects-container .project-card { | ||
width: calc((100vw - 80px) / 3); | ||
height: 520px; | ||
margin-left: 20px; | ||
margin-right: 20px; | ||
} | ||
} | ||
@media screen and (max-width: 1200px) { | ||
.ctc-home-3-projects-container { | ||
width: 80%; | ||
height: 1200px; | ||
margin-left: 10%; | ||
display: flex; | ||
justify-content: center; | ||
flex-wrap: wrap; | ||
} | ||
.ctc-home-3-projects-container .project-card { | ||
flex: 0 0 80%; | ||
width: calc((100vw - 100px) / 3); | ||
height: 0px !important; | ||
min-height: 380px; | ||
margin-bottom: 40px; | ||
} | ||
.ctc-home-3-projects-container .project-card .project-card-image-div { | ||
height: 180px; | ||
} | ||
} | ||
@media screen and (max-width: 900px) { | ||
.ctc-home-3-bg { | ||
height: 1600px; | ||
} | ||
.ctc-home-3-projects-container { | ||
height: 1270px; | ||
} | ||
.ctc-home-3-projects-container .project-card .description { | ||
font-size: 16px; | ||
line-height: 24px; | ||
} | ||
} | ||
@media screen and (max-width: 850px) { | ||
.ctc-home-3-projects-container { | ||
width: 92%; | ||
height: 1200px; | ||
margin-left: 4%; | ||
display: flex; | ||
justify-content: center; | ||
flex-wrap: wrap; | ||
} | ||
} | ||
@media screen and (max-width: 600px) { | ||
.ctc-home-3-projects-container { | ||
height: 1270px; | ||
} | ||
.ctc-home-3-projects-container .project-card { | ||
min-height: 400px; | ||
} | ||
} | ||
@media screen and (max-width: 500px) { | ||
.ctc-home-3-projects-container .project-card { | ||
min-height: 400px; | ||
} | ||
.ctc-home-3-projects-container .project-card .project-card-text { | ||
padding: 10px 22px; | ||
} | ||
.ctc-home-3-projects-container .project-card .description { | ||
font-size: 14px; | ||
line-height: 22px; | ||
} | ||
} */ | ||
|
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.