Add feature detail page

benchcoach/templates/pages/home.html

@@ -1,8 +1,6 @@
 {% extends "base.html" %}
 {% load static %}
-
 {% block content %}
-<div class="card">
   <div class="row">
     <div class="text-center my-2">
       <div class="row">
@@ -18,9 +16,7 @@
       </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"
@@ -42,7 +38,87 @@
       {% 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>
+      </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>
+    <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>
+    <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 %}