Add feature detail page

benchcoach/templates/pages/home.html

@@ -1,48 +1,124 @@
 {% extends "base.html" %}
 {% load static %}
-
 {% block content %}
-<div class="card">
-    <div class="row">
-      <div class="text-center my-2">
-        <div class="row">
-          <h1>
-            <img class="mx-auto" src="{% static 'images/benchcoach.svg' %}" style="width: 2.5em;"/>
-          </h1>
+  <div class="row">
+    <div class="text-center my-2">
+      <div class="row">
+        <h1>
+          <img class="mx-auto" src="{% static 'images/benchcoach.svg' %}" style="width: 2.5em;"/>
+        </h1>
+      </div>
+      <div class="row">
+        <h1><strong>Welcome to <span class="text-nowrap ">BenchCoach</span></strong></h1>
+      </div>
+      <div class="text-center lead fst-italic fw-light">
+        An assistant coach for TeamSnap
+      </div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col text-center">
+      {% if request.user.is_authenticated %}
+        <a class="btn btn-outline-primary"
+           href="{% url 'teamsnap_dashboard' %}"
+        >
+          Dashboard
+        </a>
+        <a class="btn btn-outline-primary"
+           href="{% url 'teamsnap_schedule' %}"
+        >
+          Schedule
+        </a>
+      {% else %}
+        <a class="btn btn-outline-primary"
+           href="{% url 'account_login' %}"
+        >
+          Login
+        </a>
+      {% endif %}
+    </div>
+  </div>
+  {% if not request.user.is_authenticated %}
+  <div class="row mt-3">
+    <h1>Features</h1>
+    <hr/>
+    <h3>Information at a glance</h3>
+    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/5.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">Sign in directly with TeamSnap</h6>
+          </div>
         </div>
-        <div class="row">
-          <h1><strong>Welcome to <span class="text-nowrap ">BenchCoach</span></strong></h1>
-        </div>
-        <div class="text-center lead fst-italic fw-light">
-          An assistant coach for TeamSnap
+      </div>
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/1.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">See upcoming and past events, with availabilities, results, and quick links.</h6>
+          </div>
         </div>
       </div>
     </div>
-    <div class="card-body">
-        <div class="row">
-          <div class="row my-2">
-            <div class="col text-center">
-              {% if request.user.is_authenticated %}
-                <a class="btn btn-outline-primary"
-                   href="{% url 'teamsnap_dashboard' %}"
-                >
-                  Dashboard
-                </a>
-                <a class="btn btn-outline-primary"
-                   href="{% url 'teamsnap_schedule' %}"
-                >
-                  Schedule
-                </a>
-              {% else %}
-                <a class="btn btn-outline-primary"
-                   href="{% url 'account_login' %}"
-                >
-                  Login
-                </a>
-              {% endif %}
-            </div>
+    <h3>Lineup Editor</h3>
+    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/2.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">Easy drag &amp; drop lineup editing</h6>
           </div>
         </div>
+      </div>
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/3.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">Edit multiple lineups at once</h6>
+          </div>
+        </div>
+      </div>
     </div>
-</div>
+    <h3>Share Lineups</h3>
+    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/6.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">Export lineups to TeamSnap and GameChanger</h6>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/7.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">Generate formatted lineup emails</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+    <h3>Share to Social Media</h3>
+    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3">
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/4.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">Customize social media with options</h6>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="d-flex p-3">
+          <div class="d-inline-block"><img src="{% static 'images/screenshots/8.jpg' %}" height="300"/></div>
+          <div class="px-2">
+            <h6 class="mb-0 mt-1">Generate social media images</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
 {% endblock %}