Fellowships support page (#1006)

Fellowships support page
MozillaFoundation · Feb 15, 2018 · 847ea5d · 847ea5d
1 parent d77f908
commit 847ea5d
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 3 deletions.
diff --git a/network-api/networkapi/fellows/templates/fellows_home.html b/network-api/networkapi/fellows/templates/fellows_home.html
@@ -13,7 +13,7 @@ <h1 class="h1-white">Fellowships</h1>
 
 {% block body %}
 <div class="row mb-5">
-  <div class="col-md-12 my-5">
+  <div class="col-md-12 mt-2 mb-5">
     <hr class="hr-gradient mt-0">
     <h4 class="h2-headings-white">What are Fellowships?</h4>
   </div>

diff --git a/network-api/networkapi/fellows/templates/fellows_support.html b/network-api/networkapi/fellows/templates/fellows_support.html
@@ -1,5 +1,89 @@
 {% extends "fellowships-base.html" %}
 
 {% block body %}
-fellows support
+<div class="row">
+  <div class="col-md-12 col-lg-9">
+    <div class="mb-4">
+      <h1 class="h1-white">Support the Program</h1>
+    </div>
+    <p>{% lorem 1 %}</p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="col-md-12">
+    <h4 class="h4-light-black">There are 2 ways you can help:</h4>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-md-9">
+    <h3 class="h5-black my-2">Be a host organization</h3>
+    {% lorem 2 p %}
+  </div>
+  <div class="col-md-3">
+    img
+  </div>
+  <div class="col-md-12">
+    <p>Post host orgs:</p>
+  </div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+  <div class="col-md-3">org logo</div>
+</div>
+
+<div class="row mb-5 justify-content-center">
+  <div class="col-12 col-md-2 hear-from-you-line-art"></div>
+  <div class="col-12 col-md-8 col-lg-6">
+    <h4 class="h4-headingcontract-black">Engaging Title for Host Orgs</h4>
+    <p class="body-black">Curious about how to become a host organization or have a specific question in mind?</p><a class="cta-link mr-4" href="">Contatc us</a>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div class="col-md-9">
+    <h3 class="h5-black my-2">Be a funder</h3>
+    {% lorem 2 p %}
+  </div>
+  <div class="col-md-3">
+    img
+  </div>
+  <div class="col-md-12">
+    <p>List of previoius funders:</p>
+  </div>
+  <div class="col-md-8">
+    <ul class="fellowships-list two-column">
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+      <li><a href="">Lorem ipsum dolor sit amet</a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="row mb-5 justify-content-center">
+  <div class="col-12 col-md-2 hear-from-you-line-art"></div>
+  <div class="col-12 col-md-8 col-lg-6">
+    <h4 class="h4-headingcontract-black">Engaging Title for Funders</h4>
+    <p class="body-black">Ipsum consequatur possimus nisi maiores dicta odio hic adipisci dolores nulla, eius consequuntur aspernatur iusto sint fugit labore accusantium quaerat.</p><a class="cta-link mr-4" href="">Contatc us</a>
+  </div>
+</div>
+
+<div class="row mb-5">
+  <div id="featured-fellow-support-page" class="featured-fellow"></div>
+</div>
+
 {% endblock %}
diff --git a/network-api/networkapi/fellows/templates/fellows_type.html b/network-api/networkapi/fellows/templates/fellows_type.html
@@ -56,8 +56,10 @@ <h4 class="h2-headings-white">Eligibility Criteria</h4>
   <div class="col-md-4">img</div>
 </div>
 
+<div class="row mb-5">
 {% block featured_fellow %}
 {% endblock %}
+</div>
 
 <div class="row py-5 px-md-2">
   <div class="col-md-2">img</div>

diff --git a/source/js/fellowships.js b/source/js/fellowships.js
@@ -34,14 +34,32 @@ function injectReactComponents() {
       name: `Firstname Surname`,
       role: `[Area Fellowship] Fellow, [Year]`,
       location: `City, Country`,
-      image: `https://images.pexels.com/photos/264206/pexels-photo-264206.jpeg?w=500`,
+      image: `https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?w=500`,
       quote: `Quote quote quote quote quote quote quote quote quote quote quote quote.`,
       affiliations: [`Stanford University Professor; YouthLAB founder`],
       'fellow_directory_link': { type: `science`, link: `/fellowships/directory` }
     };
 
     ReactDOM.render(<Person metadata={metadata} />, document.getElementById(`featured-open-web-fellow`));
   }
+
+  // Featured fellow on Support page
+  if (document.getElementById(`featured-fellow-support-page`)) {
+    let metadata = {
+      featured: true,
+      'internet_health_issues': [ `Decentralization`, `Open Innovation` ],
+      links: [],
+      name: `Firstname Surname`,
+      role: `[Area Fellowship] Fellow, [Year]`,
+      location: `City, Country`,
+      image: `https://static.pexels.com/photos/416138/pexels-photo-416138.jpeg?w=500`,
+      quote: `Quote quote quote quote quote quote quote quote quote quote quote quote.`,
+      affiliations: [ `Stanford University Professor; YouthLAB founder`],
+      'fellow_directory_link': { type: `science`, link: `/fellowships/directory` }
+    };
+
+    ReactDOM.render(<Person metadata={metadata} />, document.getElementById(`featured-fellow-support-page`));
+  }
 }
 
 export default { injectReactComponents };