-
Notifications
You must be signed in to change notification settings - Fork 5
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 #12 from resource-watch/feature/static-pages
Feature/static pages
- Loading branch information
Showing
12 changed files
with
393 additions
and
55 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,49 @@ | ||
| import React from 'react'; | ||
| import Article from '../Content/Article'; | ||
|
|
||
| function Contact(props) { | ||
| return ( | ||
| <div className="c-partners"> | ||
| <Article> | ||
| <p>Content comming soon.</p> | ||
| </Article> | ||
| </div> | ||
| ); | ||
| import Form from '../Form'; | ||
|
|
||
| class Contact extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| success: false | ||
| }; | ||
| } | ||
|
|
||
| handleSubmit() { | ||
| this.setState({success: true}); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <article className="c-article"> | ||
| <div className="row align-center"> | ||
| <div className="column small-12 medium-8"> | ||
| <h2>Submit your coments and questions</h2> | ||
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc finibus tortor a elit dignissim, vitae facilisis risus dignissim. Maecenas imperdiet laoreet ipsum id tincidunt. Ut ornare luctus scelerisque.</p> | ||
| {!this.state.success && <p>* Required field</p>} | ||
| <div className="c-form-container"> | ||
| <p className="error-message">Please, fill out the hightlighted fields bellow</p> | ||
| {!this.state.success ? | ||
| <Form type="Contact" submit={() => this.handleSubmit()} /> : | ||
| <div className="success-message"> | ||
| <div className="check"> | ||
| <svg width="13" height="9" viewBox="0 0 13 9"> | ||
| <title>check</title> | ||
| <path d="M5.744 6.997l6.514-5.465L10.972 0 4.46 5.464 1.176 3.078 0 4.696l4.854 3.527.89-1.226z" /> | ||
| </svg> | ||
| </div> | ||
| <p>Your message was sent successfully</p> | ||
| </div> | ||
| } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </article> | ||
|
|
||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Contact; |
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 |
|---|---|---|
| @@ -1,14 +1,44 @@ | ||
| import React from 'react'; | ||
| import Article from '../Content/Article'; | ||
|
|
||
| function Create(props) { | ||
| return ( | ||
| <div className="c-partners"> | ||
| <Article> | ||
| <p>Content comming soon.</p> | ||
| </Article> | ||
| </div> | ||
| ); | ||
| import Form from '../Form'; | ||
|
|
||
| class Create extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| success: false | ||
| }; | ||
| } | ||
|
|
||
| handleSubmit() { | ||
| this.setState({success: true}); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <article className="c-article"> | ||
| <div className="row align-center"> | ||
| <div className="column small-12 medium-8"> | ||
| <h2>Request access</h2> | ||
| {!this.state.success && <p>* Required field</p>} | ||
| <div className="c-form-container"> | ||
| <p className="error-message">Please, fill out the hightlighted fields bellow</p> | ||
| {!this.state.success ? | ||
| <Form type="Request access" submit={() => this.handleSubmit()} /> : | ||
| <div className="success-message"> | ||
| <div className="check"> | ||
| <svg width="13" height="9" viewBox="0 0 13 9"> | ||
| <title>check</title> | ||
| <path d="M5.744 6.997l6.514-5.465L10.972 0 4.46 5.464 1.176 3.078 0 4.696l4.854 3.527.89-1.226z" /> | ||
| </svg> | ||
| </div> | ||
| <p>Your message was sent successfully</p> | ||
| </div> } | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Create; |
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,68 @@ | ||
| import React from 'react'; | ||
|
|
||
| function Form(props) { | ||
| return ( | ||
| <div id="mc_embed_signup"> | ||
| <form | ||
| action="//resourcewatch.us12.list-manage.com/subscribe/post?u=c99e39850f4acfe33f49fea68&id=ccad0f31c4" | ||
| method="post" | ||
| id="mc-embedded-subscribe-form" | ||
| name="mc-embedded-subscribe-form" | ||
| className="validate" | ||
| target="_blank" | ||
| > | ||
| <div id="mc_embed_signup_scroll"> | ||
| <div className="mc-field-group -hidden"> | ||
| <label htmlFor="mce-MMERGE3">Who would you like to contact? *<span className="asterisk"></span></label> | ||
| <select name="MMERGE3" className="required" id="mce-MMERGE3" required defaultValue={props.type}> | ||
| <option value=""></option> | ||
| <option value="Contact">Contact</option> | ||
| <option value="Request data">Request data</option> | ||
| <option value="Join partnership">Join partnership</option> | ||
| <option value="Request access">Request access</option> | ||
| </select> | ||
| </div> | ||
| <div className="mc-field-group"> | ||
| <label htmlFor="mce-FNAME">First Name *<span className="asterisk"></span></label> | ||
| <input type="text" name="FNAME" className="required" id="mce-FNAME" required/> | ||
| </div> | ||
| <div className="mc-field-group"> | ||
| <label htmlFor="mce-LNAME">Last Name *<span className="asterisk"></span></label> | ||
| <input type="text" name="LNAME" className="required" id="mce-LNAME" required/> | ||
| </div> | ||
| <div className="mc-field-group"> | ||
| <label htmlFor="mce-EMAIL">Email Address *<span className="asterisk"></span></label> | ||
| <input type="email" name="EMAIL" className="required email" id="mce-EMAIL" required/> | ||
| </div> | ||
| <div className="mc-field-group textarea"> | ||
| <label htmlFor="mce-MMERGE4">What would you like to say? *<span className="asterisk"></span></label> | ||
| <textarea name="MMERGE4" className="required" id="mce-MMERGE4" required/> | ||
| </div> | ||
| <div id="mce-responses" className="clear"> | ||
| <div className="response" id="mce-error-response" style={{display: 'none'}}></div> | ||
| <div className="response" id="mce-success-response" style={{display: 'none'}}></div> | ||
| </div> | ||
| <div style={{position: 'absolute', left: '-5000px', ariaHidden: 'true'}}> | ||
| <input type="text" name="b_c99e39850f4acfe33f49fea68_ccad0f31c4" tabIndex="-1" value="" /> | ||
| </div> | ||
| <div className="clear"> | ||
| <input | ||
| type="submit" | ||
| value="Subscribe" | ||
| name="subscribe" | ||
| id="mc-embedded-subscribe" | ||
| className="c-button -filled -secondary-color button" | ||
| onClick={()=>props.submit()} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| Form.propTypes = { | ||
| type: React.PropTypes.string | ||
| }; | ||
|
|
||
| export default Form; |
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 |
|---|---|---|
| @@ -1,27 +1,73 @@ | ||
| import React from 'react'; | ||
| import { Link } from 'react-router'; | ||
| import temperaturesLayer from '../../../../images/home/temperatures-layer.jpg'; | ||
| import Modal from '../../Modal/Modal'; | ||
| import Form from '../../Form'; | ||
|
|
||
| const InsightsHome = () => { | ||
| return ( | ||
| <div> | ||
| <div className="row"> | ||
| <div className="column small-12 medium-8"> | ||
| <h2 className="-left">Explore the data</h2> | ||
| <Link to="/insights">Go to explore</Link> | ||
| </div> | ||
| </div> | ||
| <div className="row"> | ||
| <div className="column small-12 medium-8"> | ||
| <p>Interact with national, regional, and local data on this web map. Filter by topic, projection models, and an area of impact to create a custom map within seconds. When you’re ready, publish or share your findings to raise awareness in your community.</p> | ||
|
|
||
| class ExploreHome extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| modal: false, | ||
| success: false | ||
| }; | ||
| } | ||
|
|
||
| handleClick() { | ||
| this.setState({modal: true}); | ||
| } | ||
|
|
||
| handleSubmit() { | ||
| this.setState({success: true}); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <div className="row"> | ||
| <div className="column small-12 medium-8"> | ||
| <h2 className="-left">Explore the data</h2> | ||
| <Link to="/insights">Go to explore</Link> | ||
| </div> | ||
| </div> | ||
| <div className="column small-12 medium-4"> | ||
| <button className="c-button -border">Request data</button> | ||
| <div className="row"> | ||
| <div className="column small-12 medium-8"> | ||
| <p>Interact with national, regional, and local data on this web map. Filter by topic, projection models, and an area of impact to create a custom map within seconds. When you’re ready, publish or share your findings to raise awareness in your community.</p> | ||
| </div> | ||
| <div className="column small-12 medium-4"> | ||
| <button className="c-button -border" onClick={()=>this.handleClick()}>Request data</button> | ||
| </div> | ||
| </div> | ||
| <p><img src={temperaturesLayer} /></p> | ||
| <Modal | ||
| opened={this.state.modal} | ||
| close={() => this.setState({ modal: false })} | ||
| > | ||
| <div> | ||
| <h2>Request data</h2> | ||
| {!this.state.success && <p>* Required field</p>} | ||
| <div className="c-form-container"> | ||
| <p className="error-message">Please, fill out the hightlighted fields bellow</p> | ||
| {!this.state.success ? | ||
| <Form type="Request data" submit={() => this.handleSubmit()} /> : | ||
| <div className="success-message"> | ||
| <div className="check"> | ||
| <svg width="13" height="9" viewBox="0 0 13 9"> | ||
| <title>check</title> | ||
| <path d="M5.744 6.997l6.514-5.465L10.972 0 4.46 5.464 1.176 3.078 0 4.696l4.854 3.527.89-1.226z" /> | ||
| </svg> | ||
| </div> | ||
| <p>Your message was sent successfully</p> | ||
| </div> | ||
| } | ||
| </div> | ||
| </div> | ||
| </Modal> | ||
|
|
||
| </div> | ||
| <p><img src={temperaturesLayer} /></p> | ||
| </div> | ||
| ); | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default InsightsHome; | ||
| export default ExploreHome; |
56 changes: 43 additions & 13 deletions
56
app/scripts/components/Partnership/Articles/JoinPartnership.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 |
|---|---|---|
| @@ -1,18 +1,48 @@ | ||
| import React from 'react'; | ||
| import Form from '../../Form'; | ||
|
|
||
| function JoinPartnership() { | ||
| return ( | ||
| <div> | ||
| <a name="join"></a> | ||
| <h2>Join the PREP partnership</h2> | ||
| <p>To become a partner, prepare a short “letter of intent” expressing your entity’s interest in PREP, your intended workgroup, and how you meet the partner criteria. Members of the Steering Committee will review the letter to ensure the partnership criteria are met. Partners, and a description of their role in and contribution to PREP, will be publicly listed in the “Partners” portion of the PREP website. Partner criteria are:</p> | ||
| <ul> | ||
| <li>A commitment to the PREP mission.</li> | ||
| <li>A commitment to contribute to the Partnership{"'"}s mission through in-kind or direct contribution (e.g. engagement, data, platform).</li> | ||
| <li>Delegation of at least one person to be the point of contact who is actively involved as needed.</li> | ||
| </ul> | ||
| </div> | ||
| ); | ||
| class JoinPartnership extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| success: false | ||
| }; | ||
| } | ||
|
|
||
| handleSubmit() { | ||
| this.setState({success: true}); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div> | ||
| <a name="join"></a> | ||
| <h2>Join the PREP partnership</h2> | ||
| <p>To become a partner, prepare a short “letter of intent” expressing your entity’s interest in PREP, your intended workgroup, and how you meet the partner criteria. Members of the Steering Committee will review the letter to ensure the partnership criteria are met. Partners, and a description of their role in and contribution to PREP, will be publicly listed in the “Partners” portion of the PREP website. Partner criteria are:</p> | ||
| <ul> | ||
| <li>A commitment to the PREP mission.</li> | ||
| <li>A commitment to contribute to the Partnership{"'"}s mission through in-kind or direct contribution (e.g. engagement, data, platform).</li> | ||
| <li>Delegation of at least one person to be the point of contact who is actively involved as needed.</li> | ||
| </ul><br/> | ||
| {!this.state.success && <p>* Required field</p>} | ||
| <div className="c-form-container"> | ||
| <p className="error-message">Please, fill out the hightlighted fields bellow</p> | ||
| {!this.state.success ? | ||
| <Form type="Join partnership" submit={() => this.handleSubmit()} /> : | ||
| <div className="success-message"> | ||
| <div className="check"> | ||
| <svg width="13" height="9" viewBox="0 0 13 9"> | ||
| <title>check</title> | ||
| <path d="M5.744 6.997l6.514-5.465L10.972 0 4.46 5.464 1.176 3.078 0 4.696l4.854 3.527.89-1.226z" /> | ||
| </svg> | ||
| </div> | ||
| <p>Your message was sent successfully</p> | ||
| </div> | ||
| } | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default JoinPartnership; |
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
Oops, something went wrong.