Add Hero section

_config.yml

@@ -14,6 +14,7 @@ url: https://hackforla.github.io/website/
 collections:
   projects:
     output: true
+  hero:
 
 defaults:
   - scope:

_data/navigation/main.yml

@@ -0,0 +1,25 @@
+- name: Hack Nights
+  link: hack-nights
+  listClassName:
+  iconUrl: /svg/icon-hacknights.svg
+  iconClass: icon icon-hack-nights nav-icon
+- name: Projects
+  link: projects
+  listClassName:
+  iconUrl: /svg/icon-projects.svg
+  iconClass: icon icon-hack-nights nav-icon icon icon-projects nav-icon
+- name: Press
+  link: press
+  listClassName:
+  iconUrl: /svg/icon-press.svg
+  iconClass: icon icon-hack-nights nav-icon icon icon-projects nav-icon icon icon-press nav-icon
+- name: About
+  link: about
+  listClassName:
+  iconUrl: /svg/icon-about.svg
+  iconClass: icon icon-hack-nights nav-icon icon icon-projects nav-icon icon icon-about nav-icon
+- name: Contact Us
+  link: contact
+  listClassName: hide-mobile
+  iconUrl:
+  iconClass:

_data/navigation/social.yml

@@ -0,0 +1,35 @@
+- name: Meetup
+  link: https://www.meetup.com/hackforla/
+  iconUrl: /svg/icon-meetup
+  header: false
+  footer: true
+
+- name: Github
+  link: https://github.com/hackforla
+  iconUrl: /svg/icon-github
+  header: true
+  footer: true
+
+- name: Slack
+  link: https://hackforla-slack.herokuapp.com/
+  iconUrl: /svg/icon-slack
+  header: true
+  footer: true
+
+- name: Facebook
+  link: https://hackforla-slack.herokuapp.com/
+  iconUrl: /svg/icon-facebook
+  header: true
+  footer: true
+
+- name: Medium
+  link: https://medium.com/hack-for-la
+  iconUrl: /svg/icon-medium
+  header: true
+  footer: true
+
+- name: Twitter
+  link: https://twitter.com/HackForLA
+  iconUrl: /svg/icon-twitter
+  header: false
+  footer: true

_hero/hero.md

@@ -0,0 +1,8 @@
+---
+title: You can change LA for the better!
+message:
+  Can you design, write, or code? Are you an activist with an idea? You can help Los Angeles
+      live up to its potential at
+      Hack for LA. Everyone is welcome!
+---
+

_includes/forms/hero-signup.html

@@ -0,0 +1,9 @@
+<form class="hero-signup" name="Quick Signup Form">
+  <div class="form-input">
+    <label for="hero-signup" class="sr-only"> Enter your email address</label>
+    <input id="hero-signup" type="email" name="email" placeholder="Enter your email address" required />
+  </div>
+  <button id="hero-signup-btn" type="submit" class="btn btn-primary">
+    Sign up for updates
+  </button>
+</form>

_includes/header.html

@@ -0,0 +1,9 @@
+<header class="main-header">
+  <div class="main-header-content">
+    <div class="branding">
+      <div class="sr-only">Hack for LA</div>
+      {% include svg/logo-hfla.svg %}
+    </div>
+    {% include main-nav.html %} {% include social.html %}
+  </div>
+</header>

_includes/hero.html

@@ -0,0 +1,12 @@
+<header class="hero">
+  <div class="hero-inner">
+    {% for item in site.hero %}
+    <h1>{{ item.title }}</h1>
+    <p class="type-featured">{{ item.message }}</p>
+    {% endfor %}
+    {% include forms/hero-signup.html %}
+    <p class="form-confirmation">
+      <strong></strong>
+    </p>
+  </div>
+</header>

_includes/main-nav.html

@@ -0,0 +1,14 @@
+<nav class="header-nav">
+  <ul class="inline-list">
+    {% for item in site.data.navigation.main %}
+    <li class="{{ item.listClassName }}">
+      <a href="{{ item.link }}">
+        {% if item.iconUrl %} {%- include {{ site.baseurl
+        }}{{ item.iconUrl }} -%} {% endif %}
+        {{- item.name -}}
+      </a>
+    </li>
+
+    {% endfor %}
+  </ul>
+</nav>

_includes/social.html

@@ -0,0 +1,15 @@
+<div class="social-links">
+  <ul class="inline-list social-list">
+    {% for item in site.data.navigation.social %} {% if item.header %}
+    <li>
+      <a class="js-social-link js-social-link-{{ item.name | downcase }}" href="{{ item.link }}" target="_blank">
+        {% if item.iconUrl %} {%- include {{ site.baseurl
+        }}{{ item.iconUrl }}.svg -%} {% endif %}
+      </a>
+      <div class="span sr-only">
+        {{ item.name }}
+      </div>
+    </li>
+    {% endif %} {% endfor %}
+  </ul>
+</div>