Homepage redesign (hackforla#2373) (#35)

A + squash merge into gh-pages

* Adds communities of practice icons

* Adds COP icons to credits

* Links icons to CoP yml

* Update nav link

* Add communities icons for home page

* create new contact use section

* create new hero section of home page

* create home page communities section

* create home page join us section

* create mvp for home page program areas

* Adds anchor for home page links

* adds new home page technology section

* create home page wins section with wins card

* restyles home age for redesign

* Update program areas images

* Add border radius to containers

* Update padding on embrace section

* Hero mobile design

* Remove join text on mobile view

* Fix join text on tablet-up

* Remove contact text on mobiel view

* Develop mobile technologies section'

* Fix header padding

* Update hero CoP icons credits links

* Update hero CoP icons credits links

* Communities section mobile version

* Create small button element

* Final communities section gradient fix

* Random homepage win logic:

* Hide horizontal sidebars to match design

* Reposition homepage win overlay

* Resolve filename typo

* Change dataKey to match JSON variable

* Reposition home join us header

* Update photo for Civic Tech Infrastructure

* Use new _wins-data

* Update image link to use absolute_url variable

* Add homepage program areas links

* Refactor home wins js for _wins-data

* Disable link leading to about page

* Fix broken link path

* Remove about page link from main nav

* Move nav button styling to appropriate selector

Co-authored-by: Sarah W <[email protected]>

_data/internal/communities/data-science.yml

@@ -9,6 +9,8 @@ location:
 image: /assets/images/communities-of-practice/data.jpg
 alt: 'A person uses a laptop to review a data dashboard'
 
+icon: /assets/images/hero/communities-icons/data-science.png
+
 meeting-times: Thursdays 8:00-9:00 pm PT
 
 leadership-type: Mentor Led

_data/internal/communities/engineering.yml

@@ -9,6 +9,8 @@ location:
 image: /assets/images/communities-of-practice/engineering.jpg
 alt: 'A computer screen shows a diagram used to manage code development'
 
+icon: /assets/images/hero/communities-icons/engineering.png
+
 meeting-times: Wednesdays 6:00-7:00 pm PT
 
 leadership-type: Mentor Led

_data/internal/communities/ops.yml → _data/internal/communities/operations.yml

@@ -1,5 +1,5 @@
 ---
-name: Ops
+name: Operations
 description: This group covers all areas of dev-ops and has been the spot for coordination on infrastructure improvements such as AWS hosting, password vaults, multi-tenant product architecture, etc.
 visible: true
 status: Active
@@ -9,6 +9,8 @@ location:
 image: /assets/images/communities-of-practice/ops.jpg
 alt: 'A dramatic closeup of a screen filled with code'
 
+icon: /assets/images/hero/communities-icons/operations.png
+
 meeting-times: Tuesdays 8:00-9:00 pm PT
 
 leadership-type: Community Led

_data/internal/communities/project-management.yml → _data/internal/communities/product-management.yml

@@ -9,6 +9,8 @@ location:
 image: /assets/images/communities-of-practice/product.jpg
 alt: 'Several people around a small table listen intently as one person speaks.'
 
+icon: /assets/images/hero/communities-icons/product-management.png
+
 meeting-times: Tuesdays 6:00-7:00 pm PT
 
 leadership-type: Peer Led

_data/internal/communities/ui-ux.yml

@@ -9,6 +9,8 @@ location:
 image: /assets/images/communities-of-practice/uiux.jpg
 alt: 'A board full of Post-it notes is used as a communication tool'
 
+icon: /assets/images/hero/communities-icons/ui-ux.png
+
 meeting-times: Mondays 6:00-7:00 PM PT
 
 leadership-type: Peer Led

_data/internal/credits/data-science.yml

@@ -0,0 +1,12 @@
+---
+title: Data Science
+title-link: https://thenounproject.com/mb.icons/collection/artificial-intelligence-solid/?i=1705416
+content: icon
+used-in: Home
+artist: Med Marki
+provider: Noun Project 
+provider-link: https://thenounproject.com/
+image-url: /assets/images/hero/communities-icons/data-science.png
+alt: 'Data Science Icon'
+type: icon
+---

_data/internal/credits/engineering.yml

@@ -0,0 +1,12 @@
+---
+title: Engineering
+title-link: https://thenounproject.com/ralfschmitzer/collection/gui-basics/?i=486344
+content: icon
+used-in: Home
+artist: Ralf Schmizter
+provider: Noun Project 
+provider-link: https://thenounproject.com/
+image-url: /assets/images/hero/communities-icons/engineering.png
+alt: 'Engineering Icon'
+type: icon
+---

_data/internal/credits/marketing.yml

@@ -0,0 +1,12 @@
+---
+title: Marketing
+title-link: https://thenounproject.com/iconpai19/collection/business-finance/?i=3154527
+content: icon
+used-in: Home
+artist: IconPai
+provider: Noun Project 
+provider-link: https://thenounproject.com/
+image-url: /assets/images/hero/communities-icons/marketing.png
+alt: 'Marketing Icon'
+type: icon
+---

_data/internal/credits/operations.yml

@@ -0,0 +1,12 @@
+---
+title: Operations
+title-link: https://thenounproject.com/made.somewhere/collection/work/?i=1819014
+content: icon
+used-in: Home
+artist: Made by Made
+provider: Noun Project 
+provider-link: https://thenounproject.com/
+image-url: /assets/images/hero/communities-icons/operations.png
+alt: 'Operations Icon'
+type: icon
+---

_data/internal/credits/product-management.yml

@@ -0,0 +1,12 @@
+---
+title: Product Management
+title-link: https://thenounproject.com/kerismaker/collection/product-management-line/?i=3656728
+content: icon
+used-in: Home
+artist: Tezar Tantular
+provider: Noun Project 
+provider-link: https://thenounproject.com/
+image-url: /assets/images/hero/communities-icons/product-management.png
+alt: 'Product Management Icon'
+type: icon
+---

_data/internal/credits/revenue.yml

@@ -0,0 +1,12 @@
+---
+title: Revenue
+title-link: https://thenounproject.com/madadesign/collection/finance-and-currency/?i=3669009
+content: icon
+used-in: Home
+artist: Mada Creative
+provider: Noun Project 
+provider-link: https://thenounproject.com/
+image-url: /assets/images/hero/communities-icons/fundraising.png
+alt: 'Revenue Icon'
+type: icon
+---

_data/internal/credits/ui-ux.yml

@@ -0,0 +1,12 @@
+---
+title: UI/UX
+title-link: https://thenounproject.com/eucalyp/collection/digital-transformation-line/?i=3160558
+content: icon
+used-in: Home
+artist: Eucalyp
+provider: Noun Project 
+provider-link: https://thenounproject.com/
+image-url: /assets/images/hero/communities-icons/ui-ux.png
+alt: 'UI/UX Icon'
+type: icon
+---

_data/internal/program-areas/environment-card.yml

@@ -6,7 +6,7 @@ description: >
   these projects support Hack for LA’s advocacy of environmentalism and sustainability.
 
 
-image: /assets/images/program-areas/envirnoment.png
+image: /assets/images/program-areas/environment.png
 
 image_alt: Greenland with tornado
 
@@ -37,4 +37,4 @@ projects:
     image: /assets/images/projects/metro-ontime.png
     image_alt: LA Metro Rail logo
     link: https://www.hackforla.org/projects/metro-ontime
----
+---

_data/navigation/main.yml

@@ -4,8 +4,9 @@
 - name: Projects
   link: /projects
 
-- name: Press
-  link: /#press
+# Link below to remain inactive until About page is completed and live
+# - name: About Us
+#   link: /about
 
 - name: Join Us
   link: /join

_includes/elements/wins-card-overlay.html

@@ -0,0 +1,29 @@
+<div class="overlay">
+    <div id="overlay-project-card" class="modal-container">
+        <div class="top-buffer"></div>
+        <div class="project-card">
+        <img class="overlay-close-icon" src="/assets/images/wins-page/x.svg">
+        <div class="wins-card center-screen">
+            <div class="wins-card-top">
+            <img class="wins-card-profile-img" id="overlay-profile-img" src="/assets/images/wins-page/avatar-default.svg">
+            <div class="wins-card-top-right">
+                <div class="wins-card-title project-card-inner">
+                <span id="overlay-name" class="wins-card-name">Blank</span>
+                <span id="overlay-icons" class="wins-card-icons"></span>
+                </div>
+                <div id="overlay-teams" class="project-inner wins-card-team">Team(s): Blank</div>
+                <div id="overlay-roles" class="project-inner wins-card-team">Role(s): Blank</div>
+            </div>
+            </div>
+            <div class="wins-card-bottom">
+            <img class="wins-card-big-quote" src="/assets/images/wins-page/quote-icon.svg">
+            <div class="project-inner overlay-card-text">
+                <p id="overlay-overview">Blank</p>
+                <div id="overlay-info" class="wins-card-info"></div>
+            </div>
+            </div>
+        </div>
+        </div>
+        <div class="bottom-buffer"></div>
+    </div>
+</div>

_includes/elements/wins-card.html

@@ -0,0 +1,115 @@
+<div class="project-card wins-card wins-card--homepage" style="display: flex;">
+  <div class="wins-card-top">
+    <img class="wins-card-profile-img" />
+    <div class="project-inner wins-card-top-right">
+      <div class="wins-card-title project-card-inner">
+        <span class="wins-card-name"></span>
+        <span class="wins-card-icons">
+          <a target="_blank" class="wins-card-linkedin-icon"><img class="linkedin-icon" /></a>
+          <a target="_blank" class="wins-card-github-icon"><img class="github-icon" /></a>
+        </span>
+      </div>
+      <div class="project-inner wins-card-team"></div>
+      <div class="project-inner wins-card-role"></div>
+    </div>
+  </div>
+  <div class="wins-card-bottom">
+    <img class="wins-card-big-quote" src="/assets/images/wins-page/quote-icon.svg">
+    <div class="wins-card-info-container">
+      <div class="project-inner wins-card-text">
+        <p class="wins-card-overview"></p>
+        <div class="wins-see-more-div">
+          <span 
+            id="0"
+            expandable
+            tabindex="0"
+            class="see-more-div"
+            role="button" 
+            onclick="seeMore(id)" 
+            onkeypress="seeMore(id)" 
+          >...see more</span>
+        </div>
+      </div>
+      <div class="wins-icon-container" id="icons-0"></div>
+    </div>
+  </div>
+</div>
+
+
+<!-- 
+
+
+
+
+
+
+<div class="project-card wins-card">
+  <div class="wins-card-top">
+    <img class="wins-card-profile-img" />
+    <div class="project-inner wins-card-top-right">
+      <div class="wins-card-title project-card-inner">
+        <span class="wins-card-name"> </span>
+        <span class="wins-card-icons">
+          <a target="_blank" class="wins-card-linkedin-icon"><img class="linkedin-icon" /></a>
+          <a target="_blank" class="wins-card-github-icon"><img class="github-icon" /></a>
+        </span>
+      </div>
+      <div class="project-inner wins-card-team"></div>
+      <div class="project-inner wins-card-role"></div>
+    </div>
+  </div>
+  <div class="wins-card-bottom">
+    <img class="wins-card-big-quote" />
+    <div class="wins-card-info-container">
+      <div class="project-inner wins-card-text">
+        <p class="wins-card-overview"></p>
+        <div class="wins-see-more-div">
+          <span 
+            id="0"
+            expandable
+            tabindex="0"
+            class="see-more-div"
+          >...see more</span>
+        </div>
+      </div>
+      <div class="wins-icon-container" id="icons-0"></div>
+    </div>
+  </div>
+</div> -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

_includes/forms/contact-us.html

@@ -1,39 +1,13 @@
-<a class="anchor" id="contact"></a>
-<section class="content-section">
-  <!-- <h2 class="page-contain">Get in Touch</h2><br> -->
+<section class="home--contact home--section">
 
-  <div class="page-card card-secondary page-card-md page-card--home page-card--home-volunteer">
-    <h3 class="title3">Volunteer with us</h3>
-    <div class="row-1">
-      <div class="column volunteerWithUs">
-        <p>We are looking for volunteers of all different skill types, levels, and civic interests.</p>
-        <a href='./getting-started'><button class='btn btn-primary btn--home-survey'>Getting Started</button></a><br>
-      </div>
-      <div class="column volunteerWithUs">
-        <p>Please help us understand your transportation preferences by completing a short survey.</p>
-        <a href='https://docs.google.com/forms/d/e/1FAIpQLSeb5zITlv_OewbT_k0UMNw6kail8-vKIyjM3E9qPMLYR6qiYw/viewform'><button
-            class='btn btn-primary btn--home-survey'>Transportation</button></a>
-      </div>
-    </div>
-  </div><br>
+  <h2 class="title1">Get in touch</h2>
+  <p class="home--contact--tablet-up-only">The more you tell us about yourself, the better we can match you with the right resources.</p>
+  <div class="contact-links">
+    <p>I represent a <a href='./survey4'>government agency</a></p>
 
-  <div class="page-card card-secondary page-card-md page-card--home">
-    <h3 class="title3">Get in touch with us</h3>
-    <p>The more you tell us about yourself, the better we can match you with the right resources.</p><br>
+    <p>I represent a <a href='./survey3'>non-profit organization</a></p>
 
-    <div class="row">
-      <div class="column"><a href='./survey4'><button class='btn btn-primary btn--home-survey'>Government</button></a></div>
-      <div class="column">I am a government agency.</div>
-    </div><br>
-
-    <div class="row">
-      <div class="column"><a href='./survey3'><button class='btn btn-primary btn--home-survey'>Non-profit</button></a></div>
-      <div class="column">I am a non-profit organization.</div>
-    </div><br>
-
-    <div class="row">
-      <div class="column"><a href='./survey6'><button class='btn btn-primary btn--home-survey'>Other</button></a></div>
-      <div class="column">I am none of the above.</div>
-    </div><br>
+    <p>I'm <a href='./survey6'>someone else</a></p>
   </div>
+
 </section>