This repository was archived by the owner on Oct 5, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Homepage Info Section #35
Merged
Merged
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
22683f6
added the first draft of the info section of the home page and is fai…
sdmungov 366385f
added styling to info cards
sdmungov f7ac956
Dev/17 jh info cards (#36)
he-james c0aefeb
Merge branch 'feature/2_cimun-homepage' into dev/17_info-cards
sdmungov File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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,174 @@ | ||
| import { ComponentWrapper } from "../../styles/containers"; | ||
| import { SubTitle, Body } from "../../styles/typography"; | ||
| import { colors } from "../../styles/colors"; | ||
| import { breakpoints } from "../../styles/breakpoints"; | ||
| import styled from "styled-components"; | ||
|
|
||
| const InfoColumnWrapper = styled(ComponentWrapper)` | ||
| display: flex; | ||
| flex: 1; | ||
| width: 94vw; | ||
| margin: 3.9375vw auto; | ||
| ${breakpoints("margin", "", [{ 1000: "10px 0" }])}; | ||
| justify-content: space-between; | ||
| flex-direction: row; | ||
| ${breakpoints("flex-direction", "", [{ 1000: "column" }])}; | ||
| `; | ||
| const CardWrapper = styled.div<{ | ||
| bordered?: boolean; | ||
| flex?: string; | ||
| height?: string; | ||
| margins?: string; | ||
| pad?: string; | ||
| }>` | ||
| display: flex; | ||
| flex: ${(props) => (props.flex ? props.flex : "1")}; | ||
| ${breakpoints("flex", "", [{ 1400: "1" }])}; | ||
| ${breakpoints("width", "", [{ 1400: "100%" }])}; | ||
| align-items: center; | ||
| flex-direction: row; | ||
| ${breakpoints("flex-direction", "", [{ 1400: "column" }])}; | ||
| justify-content: space-between; | ||
| ${breakpoints("align-items", "", [{ 1400: "flex-end" }])}; | ||
| margin: ${(props) => (props.margins ? props.margins : "1rem")}; | ||
| padding: ${(props) => (props.pad ? props.pad : "1.5rem")}; | ||
| ${breakpoints("padding", "", [{ 1400: "1.5rem auto" }])}; | ||
| ${breakpoints("margin", "", [{ 1400: "1rem 0" }])}; | ||
| `; | ||
| const CardContainer = styled.div<{ | ||
| bordered?: boolean; | ||
| flex?: string; | ||
| height?: string; | ||
| color?: string; | ||
| margins?: string; | ||
| pad?: string; | ||
| }>` | ||
| display: flex; | ||
| flex: ${(props) => (props.flex ? props.flex : "1")}; | ||
| ${breakpoints("flex", "", [{ 1400: "1" }])}; | ||
| ${breakpoints("min-width", "", [{ 1400: "45vw" }])}; | ||
| ${breakpoints("width", "", [{ 1000: "94vw" }])}; | ||
| height: ${(props) => (props.height ? props.height : "auto")}; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| background-color: ${(props) => (props.color ? props.color : "transparent")}; | ||
| margin: ${(props) => (props.margins ? props.margins : "1rem")}; | ||
| padding: ${(props) => (props.pad ? props.pad : "1.5rem")}; | ||
| ${breakpoints("padding", "", [{ 1400: "1rem" }])}; | ||
| ${breakpoints("margin", "", [{ 1400: "1rem 0" }])}; | ||
| `; | ||
| const Title = styled(SubTitle)` | ||
| font-size: 6rem; | ||
| ${breakpoints("font-size", "", [{ 1000: "4rem" }, { 720: "2.25rem" }])}; | ||
| width: 100px; | ||
| ${breakpoints("width", "", [{ 1000: "100%" }])}; | ||
| margin: 0; | ||
| font-weight: 1000; | ||
| `; | ||
|
|
||
| const InfoColumns = () => { | ||
| return ( | ||
| <InfoColumnWrapper> | ||
| <CardContainer flex="1" margins="1rem 0" pad="0 1rem 0 0"> | ||
| <Title line={0.9}>Welcome Back, Delegates.</Title> | ||
| <Body line={1.4} align={"justify"}> | ||
| For 18 years, CIMUN has been a premier conference for scholastic Model | ||
| United Nations programs. <br /> | ||
| <br /> | ||
| Beginning with our opening ceremonies, delegates are introduced to a | ||
| fully-integrated simulation, where they are challenged to work | ||
| across committees as they confront complex present-day and historical | ||
| issues. <br /> | ||
| <br /> | ||
| The CIMUN Philosophy is to educate through <em>accuracy and realism</em>. | ||
| In this regard, action taken in one committee affects the | ||
| proceedings in every other committee. Crises occur in real-time | ||
| throughout the weekend, and CIMUN staff diligently work to create a | ||
| conference that is fast-paced, nuanced, and above all else, | ||
| educational. CIMUN recognizes that nations cannot always solve | ||
| problems together, and that the complexity of international affairs is | ||
| high. Delegates are rewarded for demonstrating comprehensive knowledge | ||
| of their nation's stance and role on the global stage, rather than for | ||
| passing empty resolutions or for compromising their nation's values. | ||
| <br /> | ||
| <br /> | ||
| As an independent conference, CIMUN is not affiliated with any | ||
| university. Rather, we are a diverse and talented team of students, | ||
| post-graduates, and professionals from backgrounds in academia, | ||
| finance, politics, business, technology and more to deliver a | ||
| high-caliber educational experience to our delegates. | ||
| <br /> | ||
| <br /> | ||
| This coming year, we welcome you - delegates, faculty, sponsors, and all others - | ||
| <em> in-person</em>, to the <strong> 18th Chicago International Model United Nations | ||
| conference</strong>. We hope you can make it! | ||
| </Body> | ||
| </CardContainer> | ||
| <CardWrapper flex="2" margins="1rem 0" pad="1rem 0 6rem 1rem"> | ||
| <CardContainer | ||
| bordered | ||
| height="600px" | ||
| color={colors.primaryBlue} | ||
| margins="1rem 1rem 0 0" | ||
| > | ||
| <SubTitle size="3.5rem" | ||
| mobSize="2rem" | ||
| margins="10px 0" | ||
| self="center" | ||
| align="center" | ||
| line={0.9} | ||
| color={colors.ltGray}> | ||
| Join us in-person! | ||
| </SubTitle> | ||
| <div | ||
| style={{ | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| }} | ||
| > | ||
| <Body align="center" self="center" size="2rem" weight={700} color={colors.ltGray}> | ||
| February 3rd - 4th, 2022 | ||
| </Body> | ||
| <Body align="center" self="center" size="2rem" color={colors.ltGray}> | ||
| <b>The Palmer House Hilton Hotel</b> | ||
| <br /> | ||
| <i>17 East Monroe Street<br />Chicago, IL 60603</i> | ||
| </Body> | ||
| </div> | ||
| </CardContainer> | ||
| <CardContainer | ||
| bordered | ||
| height="600px" | ||
| color={colors.fadedPrimaryBlue} | ||
| margins="1rem 0 0 1rem" | ||
| > | ||
| <SubTitle size="3.5rem" mobSize="1.9rem" margins="10px 0" self="center" align="center" line={0.9}> | ||
| Don't Miss Out! | ||
| </SubTitle> | ||
| <SubTitle size="2rem" margins="10px 0" self="center" align="center"> | ||
| Save these dates: | ||
| </SubTitle> | ||
| <div | ||
| style={{ | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| }} | ||
| > | ||
| <Body align="center" self="center" size="1.75rem"> | ||
| <b>September 1st, 2021</b> - School Applications Open | ||
| </Body> | ||
| <Body align="center" self="center" size="1.75rem"> | ||
| <b>August 1st, 2021</b> - Staff Applications Open | ||
| </Body> | ||
| <Body align="center" self="center" size="1.75rem"> | ||
| <b>January 16th, 2022</b> - Position Papers Submissions | ||
| </Body> | ||
| </div> | ||
| </CardContainer> | ||
| </CardWrapper> | ||
| </InfoColumnWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| export default InfoColumns; |
This file contains hidden or 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 hidden or 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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hahaha linter