From e126756287be2d2ea8f1072c4f75ce1e5595978b Mon Sep 17 00:00:00 2001
From: Ali Karbassi <ali@karbassi.com>
Date: Sat, 6 Jun 2020 15:14:07 -0500
Subject: [PATCH] Beginning of donation page redo

---
 weallcode/static/weallcode/css/app.css        |   5 +
 weallcode/templates/weallcode/_footer.html    |   2 +-
 .../templates/weallcode/associate_board.html  |   6 +-
 weallcode/templates/weallcode/donate.html     | 224 ++++++++++++++++++
 weallcode/templates/weallcode/join_us.html    |   2 +-
 weallcode/urls.py                             |   2 +
 weallcode/views.py                            |  11 +-
 7 files changed, 244 insertions(+), 8 deletions(-)
 create mode 100644 weallcode/templates/weallcode/donate.html

diff --git a/weallcode/static/weallcode/css/app.css b/weallcode/static/weallcode/css/app.css
index 3303fb05..7f9f6fd3 100644
--- a/weallcode/static/weallcode/css/app.css
+++ b/weallcode/static/weallcode/css/app.css
@@ -204,6 +204,10 @@ section {
   outline: none;
 }
 
+address {
+  margin-bottom: 1rem;
+}
+
 ul.list-plus {
   margin: 0;
   padding: 0;
@@ -611,6 +615,7 @@ html[data-whatintent="mouse"] .main-menu a:not(.button):hover,
   }
 
   html[data-whatintent="mouse"] .sub-menu a:hover,
+  .sub-menu .active,
   .sub-menu .active a {
     padding-bottom: calc(1.2rem - 5px);
     border-bottom: 5px solid var(--black);
diff --git a/weallcode/templates/weallcode/_footer.html b/weallcode/templates/weallcode/_footer.html
index 8a50add4..0f4e16dc 100644
--- a/weallcode/templates/weallcode/_footer.html
+++ b/weallcode/templates/weallcode/_footer.html
@@ -40,7 +40,7 @@
           <ul>
             <li><a href="{% url 'weallcode-join-us' %}#volunteer">Volunteer</a></li>
             <li><a href="{% url 'weallcode-associate-board' %}">Associate Board</a></li>
-            <li><a href="#donate">Donate</a></li>
+            <li><a href="{% url 'weallcode-donate' %}">Donate</a></li>
             <li><a href="{% url 'weallcode-join-us' %}#sponsorship">Sponsorship</a></li>
             <li><a href="{% url 'weallcode-join-us' %}#contact">Contact Us</a></li>
           </ul>
diff --git a/weallcode/templates/weallcode/associate_board.html b/weallcode/templates/weallcode/associate_board.html
index 5115d932..13e35c01 100644
--- a/weallcode/templates/weallcode/associate_board.html
+++ b/weallcode/templates/weallcode/associate_board.html
@@ -1,6 +1,6 @@
 {% extends 'weallcode/_base.html' %}
 
-{% load static %}
+{% load static active %}
 
 {% block page-class %}join-us{% endblock %}
 
@@ -13,8 +13,8 @@
     <nav class="grid-container" role="navigation">
       <ul class="menu">
         <li><a href="{% url 'weallcode-join-us' %}#volunteer">Volunteer</a></li>
-        <li class="active"><a href="{% url 'weallcode-associate-board' %}">Associate Board</a></li>
-        <li><a href="{% url 'weallcode-join-us' %}#donate-form">Donate</a></li>
+        <li><a href="{% url 'weallcode-associate-board' %}" class="active">Associate Board</a></li>
+        <li><a href="{% url 'weallcode-donate' %}">Donate</a></li>
         <li><a href="{% url 'weallcode-join-us' %}#sponsorship">Sponsorship</a></li>
         <li><a href="{% url 'weallcode-join-us' %}#contact">Contact Us</a></li>
       </ul>
diff --git a/weallcode/templates/weallcode/donate.html b/weallcode/templates/weallcode/donate.html
new file mode 100644
index 00000000..d16498e4
--- /dev/null
+++ b/weallcode/templates/weallcode/donate.html
@@ -0,0 +1,224 @@
+{% extends 'weallcode/_base.html' %}
+
+{% load static %}
+
+{% block page-class %}donate{% endblock %}
+
+{% block subheader %}
+  {% if messages %}
+    {% include 'weallcode/_messages.html' %}
+  {% endif %}
+
+  <div class="sub-menu">
+    <nav class="grid-container" role="navigation">
+      <ul class="menu">
+        <li><a href="{% url 'weallcode-join-us' %}#volunteer">Volunteer</a></li>
+        <li><a href="{% url 'weallcode-associate-board' %}">Associate Board</a></li>
+        <li><a href="{% url 'weallcode-donate' %}" class="active">Donate</a></li>
+        <li><a href="{% url 'weallcode-join-us' %}#sponsorship">Sponsorship</a></li>
+        <li><a href="{% url 'weallcode-join-us' %}#contact">Contact Us</a></li>
+      </ul>
+    </nav>
+  </div>
+{% endblock subheader %}
+
+{% block messages %}{% endblock %}
+
+{% block content %}
+
+  {% include "weallcode/snippets/hero_image.html" with src="weallcode/images/photos/hero-associate-board.jpg" alt="Associate Board" %}
+
+  <!-- Introduction -->
+  <section id="introduction" class="padding-top-3">
+    <div class="grid-container">
+      <div class="grid-x margin-bottom-2">
+        <div class="cell large-8 padding-right-2">
+          <h1 class="title text-tertiary">Support We All Code</h1>
+          <p>Development of Django is supported by an independent foundation established as a 501(c)(3) non-profit. Like most open-source foundations, the goal of the Django Foundation is to promote, support, and advance the Django web framework.</p>
+        </div>
+        <div class="cell large-4 position-relative">
+          <div class="aside-title">
+            <div>
+              <span class="text-tertiary display-inline-block">Educate the </span>
+              <span class="text-tertiary display-inline-block">technology </span>
+              <span class="text-secondary display-inline-block">leaders of </span>
+              <span class="text-white display-inline-block">tomorrow</span>
+            </div>
+            <div class="line width-25 bg-primary margin-top-1"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x margin-vertical-2">
+        <div class="cell medium-8">
+          <h2 class="title text-primary" id="how-to-donate">How do I donate?</h2>
+
+          <p>We accept donations via card or Bitcoin on our <a href="https://www.djangoproject.com/fundraising/">fundraising page</a>.</p>
+
+          <p>You can also mail a check made out to We All Code to:</p>
+
+          <address>
+          We All Code<br>
+          3432 W Diversey Ave<br>
+          Chicago IL 60647-1221<br>
+          </address>
+
+          <p>If you send a donation by mail, please indicate if you need a receipt and, if so, where to send it.</p>
+
+          <p>We can also accept other payment options, please <a href="mailto:hello@weallcode.org">contact us</a> for details.</p>
+
+          <h2>Are there other ways to give?</h2>
+
+          <p>Yes, here are a couple:</p>
+
+          <h3 id="benevity-giving">Benevity Workplace Giving Program</h3>
+
+          <p>We All Code is pleased to be a participant in the <strong><a href="http://www.benevity.com" target="_blank" >Benevity Workplace Giving Program</a></strong>. When your employer becomes a member of the Benevity community, you are able to make donations to We All Code via payroll deduction. Many employers offer a matching contribution as well, increasing the amount that We All Code receives from your donation.</p>
+
+          <p>Benevity is available to employers in any country, and works with your company’s payroll department for ease of use from set up to payments.</p>
+
+          <p>Check with your employer to see if they participate in Benevity, or visit the <a href="http://www.benevity.com" target="_blank" >Benevity</a> site to find out more if your employer is not yet part of the Benevity program.</p>
+
+          <h3 id="amazon-smile">Amazon Smile</h3>
+
+          <p>We All Code is a recipient for <a href="https://smile.amazon.com/ch/46-4988098" target="_blank" >Amazon Smile</a>. When you shop at Amazon, you can nominate for 0.5% of the purchase price of your eligible AmazonSmile purchases to be donated to We All Code.</p>
+
+          <h2 id="donation-usage">How will my donation be used?</h2>
+
+          <!-- TODO: Fill this out -->
+          <p>Fill this out</p>
+
+          <h2 id="corporate-donations">Do you accept donations from companies/corporations?</h2>
+
+          <p>Yes. We also have a corporate sponsorship program. <a href="/contact/foundation/">Get in touch</a> if you'd like to know more.</p>
+
+          <h2 id="specific-feature">Can I choose a specific feature or project to support?</h2>
+
+          <p>No: we don't allow donors to directly sponsor specific features.</p>
+
+          <p>However, we may be able to connect you to a Django developer who you can hire to work on a specific feature. Please <a href="/contact/foundation/">get in touch</a> if this sounds like something you'd like to pursue.</p>
+
+          <h2 id="tax-deductible">Is my donation tax deductible?</h2>
+
+          <p>We All Code is a non-profit corporation; we have tax-exempt status under IRC 501(c)(3). This means that donations are tax-deductible for US citizens; donors outside of the United States should consult a tax advisor.</p>
+
+          <h2 id="donation-alternatives">How can I donate if Stripe won't process my payment?</h2>
+
+          <p>Please <a href="mailto:fundraising@djangoproject.com">get in touch</a> with us, and we'll figure something out that works for you.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  {% include "weallcode/snippets/hero_image.html" with src="weallcode/images/photos/hero-team.jpg" alt="Associate Board" %}
+
+  <!-- More Introduction -->
+  <section id="more-information" class="padding-top-3">
+    <div class="grid-container">
+      <div class="grid-x grid-padding-x margin-bottom-3">
+        <div class="cell medium-6">
+          <h3 class="title text-primary">Benefits of an Associate Board Membership</h3>
+
+          <ul class="list-plus">
+            <li>Friend-raising and networking experience</li>
+            <li>Leadership development experience and mentoring with the Board of Directors</li>
+            <li>Mentoring opportunities</li>
+            <li>Name recognition on Board invitations (when appropriate)</li>
+            <li>Recognition in the organization's Annual Report</li>
+            <li>Opportunities to enjoy special privileges such as behind-the-scenes tours and previews of new programs and initiatives</li>
+          </ul>
+        </div>
+        <div class="cell medium-6">
+          <div class="binary-drop-right">
+            <img class="width-100" src="{% static 'weallcode/images/photos/volunteering-2.jpg' %}" alt="Photo of student and mentor in class.">
+          </div>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x margin-bottom-3">
+
+        <div class="cell medium-8">
+          <h3 class="title text-primary">Membership Requirements</h3>
+
+          <ul class="list-plus">
+            <li>A passion for building future leaders and a commitment to developing students of courage, confidence and character.</li>
+            <li>Personally donate $250 (give) and work to bring in additional $500 (get) through personal/professional networks throughout the year.</li>
+            <li>Be an enthusiastic advocate for the mission of We All Code, especially among Chicago's young professional community.</li>
+            <li>Attend at least 75% of scheduled meetings, though attendance at all meetings is strongly encouraged.</li>
+            <li>Join an Associate Board committee.</li>
+            <li>Support fundraising events. This would include at least two of the following:
+              <ul class="list-plus">
+                <li>Secure monetary or in-kind donations.</li>
+                <li>Purchase at least one ticket and attend the event(s)</li>
+                <li>Make a personal financial donation towards the event if unable to attend</li>
+                <li>Purchase raffle tickets, silent auction items, etc. (if applicable)</li>
+              </ul>
+            </li>
+            <li>Engage personal and professional networks and/or companies to support the organization at-large and Associate Board-specific events.</li>
+            <li>Commit to building students of courage, confidence and character, who make the world a better place and be passionate about developing future leaders.</li>
+          </ul>
+
+          <p>The Associate Board currently consists of approximately 15 members. We aspire to grow while keeping membership limited. Our target members are professionals, entrepreneurs, and civic leaders in the first 5-10 years of their careers. Membership on the Associate Board is open to anyone who is passionate about We All Code's mission and interested in supporting the work we do.</p>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x margin-bottom-2">
+        <div class="cell medium-8">
+          <h3 class="title text-primary">Fundraising Goal</h3>
+
+          <p>Each year, the Associate Board works with its liaison(s) from the Board of Directors to establish a fundraising goal for the fall event in addition to the Associate Board give/get requirements.</p>
+        </div>
+      </div>
+
+      <div class="grid-x grid-padding-x margin-bottom-2">
+        <div class="cell medium-6">
+          <h3 class="title text-primary margin-bottom-2">Associate Board Committees</h3>
+
+          <p><strong>Outreach</strong> - The Associate Board Outreach Committee works to increase the reach of We All Code, build a network/pipeline, and ensure that multiple dimensions of We All Code are represented.</p>
+
+          <p><strong>Fundraising</strong> - The Associate Board Fundraising Committee uses creativity and connections, with a We All Code focus, to lead the annual fall event. This Committee focuses on leading the full Associate Board through the process of securing sponsorships, selling tickets, securing silent auction items, and creating an event that is engaging and mission-oriented.</p>
+
+          <p><strong>Volunteer</strong> - The Associate Board Volunteer Committee works to create opportunities that engage the Associate Board members with the mission of the organization in a hands-on, meaningful way that also creates social interaction with each other.</p>
+
+          <h3 class="title text-primary margin-vertical-2">Questions?</h3>
+
+          <p>Please contact us at <a href="mailto:hello@weallcode.org">hello@weallcode.org</a> for any questions or more information.</p>
+
+        </div>
+        <div class="cell medium-6">
+          <div class="binary-drop-right">
+            <img class="width-100" src="{% static 'weallcode/images/photos/volunteering-3-small.jpg' %}" alt="Photo of student and mentor in class.">
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center margin-bottom-2">
+        <a class="button large" href="{% url 'weallcode-associate-board' %}#form">Apply to the Associate Board</a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Form -->
+  <section id="form" class="bg-binary padding-vertical-2">
+    <div class="grid-container">
+      <div class="grid-x margin-vertical-3">
+        <div class="cell medium-8 bg-white">
+          <h2 class="title text-primary padding-horizontal-2 padding-top-2">Apply to join the Associate Board</h2>
+          <p class="padding-horizontal-2"><strong>Don't miss this unique opportunity to give back to the Chicago community!</strong></p>
+
+          <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKzZFNOjjsuRDtEw8VsR98_8MSq38SoyGDdlmfh1ibFJLOcw/viewform?embedded=true" width="100%" height="1000" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
+        </div>
+        <div class="cell medium-4 bg-dark-blue text-white padding-2">
+          <div class="line bg-secondary width-25 margin-bottom-3"></div>
+          <div class="text-huge text-uppercase text-bold line-height-1 margin-bottom-2">
+            <span class="text-primary">Help us eliminate</span>
+            <span class="text-secondary">the barriers preventing</span>
+            <span class="text-tertiary">all Chicago kids from</span>
+            <span>learning to code.</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+{% endblock %}
diff --git a/weallcode/templates/weallcode/join_us.html b/weallcode/templates/weallcode/join_us.html
index f53667b7..21265d3a 100644
--- a/weallcode/templates/weallcode/join_us.html
+++ b/weallcode/templates/weallcode/join_us.html
@@ -14,7 +14,7 @@
       <ul class="menu">
         <li><a href="{% url 'weallcode-join-us' %}#volunteer">Volunteer</a></li>
         <li><a href="{% url 'weallcode-associate-board' %}">Associate Board</a></li>
-        <li><a href="{% url 'weallcode-join-us' %}#donate-form">Donate</a></li>
+        <li><a href="{% url 'weallcode-donate' %}">Donate</a></li>
         <li><a href="{% url 'weallcode-join-us' %}#sponsorship">Sponsorship</a></li>
         <li><a href="{% url 'weallcode-join-us' %}#contact">Contact Us</a></li>
       </ul>
diff --git a/weallcode/urls.py b/weallcode/urls.py
index c19040c2..c74cf36a 100644
--- a/weallcode/urls.py
+++ b/weallcode/urls.py
@@ -6,6 +6,7 @@
 from .views import (
     AssociateBoardView,
     CreditsView,
+    DonateView,
     HomeView,
     JoinUsView,
     OurStoryView,
@@ -32,6 +33,7 @@
         path('', JoinUsView.as_view(), name='weallcode-join-us'),
         path('associate-board/', AssociateBoardView.as_view(), name='weallcode-associate-board'),
     ])),
+    path('donate/', DonateView.as_view(), name='weallcode-donate'),
     path('privacy/', PrivacyView.as_view(), name='weallcode-privacy'),
     path('credits/', CreditsView.as_view(), name='weallcode-credits'),
 
diff --git a/weallcode/views.py b/weallcode/views.py
index b316658d..3c832a0b 100644
--- a/weallcode/views.py
+++ b/weallcode/views.py
@@ -2,6 +2,7 @@
 from datetime import datetime
 from itertools import chain
 
+from coderdojochi.models import Course, Mentor, Session
 from django.conf import settings
 from django.contrib import messages, sitemaps
 from django.contrib.auth import get_user_model
@@ -10,12 +11,9 @@
 from django.urls import reverse, reverse_lazy
 from django.utils import timezone
 from django.views.generic import FormView, TemplateView
-
 from meta.views import MetadataMixin
 from sentry_sdk import capture_message
 
-from coderdojochi.models import Course, Mentor, Session
-
 from .forms import ContactForm
 from .models import AssociateBoardMember, BoardMember, StaffMember
 
@@ -280,6 +278,13 @@ class AssociateBoardView(DefaultMetaTags, TemplateView):
     title = f"Join our Associate Board | {settings.SITE_NAME}"
 
 
+class DonateView(DefaultMetaTags, TemplateView):
+    template_name = "weallcode/donate.html"
+    url = reverse_lazy('weallcode-donate')
+
+    title = f"Support We All Code | {settings.SITE_NAME}"
+
+
 class PrivacyView(DefaultMetaTags, TemplateView):
     template_name = "weallcode/privacy.html"
     url = reverse_lazy('weallcode-privacy')