diff --git a/src/scenes/home/getInvolved/getInvolved.css b/src/scenes/home/getInvolved/getInvolved.css new file mode 100644 index 000000000..c2386514c --- /dev/null +++ b/src/scenes/home/getInvolved/getInvolved.css @@ -0,0 +1,66 @@ +/* Shared styles for Get Involved sections: Why Give, Volunteer, etc. */ + +.wrapper { + display: flex; +} + +.half { + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 50%; +} + +.halfPhotoWrapper { + composes: half; +} + +.photo { + width: 100%; + max-width: 500px; + height: auto; +} + +.list { + list-style-type: none; + margin: 0; + padding: 0; +} + +.listItem { + display: flex; + align-items: center; +} + +.itemText { + margin-left: 20px; +} + +.button { + margin-top: 1rem; +} + +@media only screen and (min-width: 1112px) { + .half { + padding: 2rem; + } +} + +@media only screen and (min-width: 320px) and (max-width: 1111px) { + .wrapper { + display: flex; + flex-direction: column; + align-items: center; + } + + .half { + padding: 1rem 0; + width: 100%; + } + + .halfPhotoWrapper { + order: -1; + } +} \ No newline at end of file diff --git a/src/scenes/home/getInvolved/getInvolved.js b/src/scenes/home/getInvolved/getInvolved.js new file mode 100644 index 000000000..44c8c17f0 --- /dev/null +++ b/src/scenes/home/getInvolved/getInvolved.js @@ -0,0 +1,19 @@ +import React from 'react'; +import HeroBanner from 'shared/components/heroBanner/heroBanner'; +import WhyGive from './whyGive/whyGive'; +import Volunteer from './volunteer/volunteer'; + +const getInvolved = () => ( +
+ + + + +
+); + +export default getInvolved; diff --git a/src/scenes/home/getInvolved/volunteer/volunteer.js b/src/scenes/home/getInvolved/volunteer/volunteer.js new file mode 100644 index 000000000..feff14417 --- /dev/null +++ b/src/scenes/home/getInvolved/volunteer/volunteer.js @@ -0,0 +1,54 @@ +import React from 'react'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; +import faCheck from '@fortawesome/fontawesome-free-solid/faCheck'; +import LinkButton from 'shared/components/linkButton/linkButton'; +import Section from 'shared/components/section/section'; +import styles from '../getInvolved.css'; + +const Volunteer = () => ( +
+
+
+
    +
  • + +

    + Join our community on Slack, and work with new software developers + to help grow and mentor them in learning to code and enter the + tech industry. Answer questions, participate in mock interviews, + and review resumes. +

    +
    • + +
  • + +

    + Lead a squad of new developers in learning new skills in Linux, + Python, cloud infrastructure, web development, and more. +

    +
    • + +
  • + +

    + Meet up with a local chapter (or start your own!) and network with + other new developers eager to build cool apps and code the future! +

    +
    • +
+
+
+ Operation Code Members at Operation Spark +
+
+
+ +
+
+); + +export default Volunteer; diff --git a/src/scenes/home/getInvolved/whyGive/whyGive.js b/src/scenes/home/getInvolved/whyGive/whyGive.js new file mode 100644 index 000000000..f55f13c32 --- /dev/null +++ b/src/scenes/home/getInvolved/whyGive/whyGive.js @@ -0,0 +1,78 @@ +import React from 'react'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; +import faCheck from '@fortawesome/fontawesome-free-solid/faCheck'; +import LinkButton from 'shared/components/linkButton/linkButton'; +import Section from 'shared/components/section/section'; +import styles from '../getInvolved.css'; + +const WhyGive = () => ( +
+
+
+ Benefit Dinner 2017 +
+
+
    +
  • + +

    + To provide veterans, transitioning servicemembers, and military + spouses with transformative educational experiences +

    +
    • + +
  • + +

    + To advocate for more diversity and opportunity in the tech + industry +

    +
    • + +
  • + +

    + To enable our mission to reach more members of the military + community +

    +
    • + +
  • + +

    + Scholarship funding for comp sci education, industry certification +

    +
    • + +
  • + +

    + Sending veterans to conferences and major tech industry events +

    +
    • + +
  • + +

    + Building more tech communities near military installations +

    +
    • +
+
+
+
+ +
+
+); + +export default WhyGive; diff --git a/src/scenes/home/home.js b/src/scenes/home/home.js index b7c03ea1d..63dedfdca 100644 --- a/src/scenes/home/home.js +++ b/src/scenes/home/home.js @@ -38,6 +38,7 @@ import Gala from './gala/gala'; import Terms from './termsOfService/termsOfService'; import OurPrograms from './ourPrograms/ourPrograms'; import ChapterLeader from './chapterLeader/chapterLeader'; +import GetInvolved from './getInvolved/getInvolved'; import Policy from './policy/policy'; import OpCodeCon from './opCodeCon/opCodeCon'; import styles from './home.css'; @@ -205,6 +206,7 @@ class Home extends Component { + { + const bannerStyles = { + backgroundImage: `url(${imageSrc})` + }; + + return ( +
+
+

{title}

+ { subtitle && +

{subtitle}

+ } +
+
+ ); +}; + +HeroBanner.propTypes = { + imageSrc: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + subtitle: PropTypes.string +}; + +HeroBanner.defaultProps = { + subtitle: '' +}; + +export default HeroBanner; diff --git a/stories/components/heroBanner/index.js b/stories/components/heroBanner/index.js new file mode 100644 index 000000000..19afff5de --- /dev/null +++ b/stories/components/heroBanner/index.js @@ -0,0 +1,9 @@ +import react from 'react'; +import { storiesOf } from '@storybook/react'; +import HeroBanner from 'shared/components/heroBanner/heroBanner'; + +import jamesBondJpg from '../../asset/james-bond.jpg'; + +storiesOf('HeroBanner', module).add('Default', () => ( + +));