From b43e182d8e24cf324e0bae7c876ace27853f35b1 Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Tue, 28 Dec 2021 19:13:46 +0530
Subject: [PATCH] Set up FAQ and timeline sections

---
 src/index.htm | 105 +++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 87 insertions(+), 18 deletions(-)

diff --git a/src/index.htm b/src/index.htm
index b84f270..64f1638 100644
--- a/src/index.htm
+++ b/src/index.htm
@@ -222,26 +222,95 @@
       </div>
     </div>
 
-    <div class="bg-orange-200 text-orange-900 w-full md:w-3/5 lg:w-3/4">
+    <div class="bg-orange-200 text-orange-900 w-full">
       <div class="max-w-4xl mx-auto p-10">
-        <h1 class="text-4xl font-heading font-extrabold lowercase text-center">Frequently asked questions</h1>
-        <ul>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
-          <li>Bla</li>
+        <h1 class="text-4xl font-heading font-extrabold lowercase text-center">What happens next?</h1>
+
+        <ul class="my-4 text-xl font-sans">
+
+          <li class="flex flex-col md:flex-row items-center md:items-stretch">
+            <div class="py-4 w-8 order-1 md:order-2">
+              <p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">1</p>
+              <div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
+            </div>
+            <div class="md:w-1/2 p-4 order-2 md:order-1">
+              <img width=640 height=480 />
+            </div>
+            <div class="md:w-1/2 md:pl-4 flex items-center order-3">
+              <p>You make your pledge, saying how much you're willing to donate to us</p>
+            </div>
+          </li>
+
+          <li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
+            <div class="py-4 w-8 order-1 md:order-2">
+              <p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">2</p>
+              <div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
+            </div>
+            <div class="md:w-1/2 p-4 order-2 md:order-1">
+              <img width=640 height=480 />
+            </div>
+            <div class="md:w-1/2 md:pr-4 flex items-center order-3">
+              <p>Once we've collected enough pledges to start operations, we'll reach out to you to make the payment</p>
+            </div>
+          </li>
+
+          <li class="flex flex-col md:flex-row items-center md:items-stretch">
+              <div class="py-4 w-8 order-1 md:order-2">
+                <p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">3</p>
+                <div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
+              </div>
+              <div class="md:w-1/2 p-4 order-2 md:order-1">
+                <img width=640 height=480 />
+              </div>
+              <div class="md:w-1/2 md:pl-4 flex items-center order-3">
+                <p>You can make your payment through Internet Banking, card, UPI, cheque, or any other preferred method</p>
+              </div>
+            </li>
+
+            <li class="flex flex-col md:flex-row-reverse items-center md:items-stretch">
+              <div class="py-4 w-8 order-1 md:order-2">
+                <p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">4</p>
+                <div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
+              </div>
+              <div class="md:w-1/2 p-4 order-2 md:order-1">
+                <img width=640 height=480 />
+              </div>
+              <div class="md:w-1/2 md:pr-4 flex items-center order-3">
+                <p>When all the payments have come in, we will be ready to start printing!</p>
+              </div>
+            </li>
+
+            <li class="flex flex-col items-center">
+              <div class="py-4 w-8">
+                <div class="w-0 h-full border border-orange-700 mx-auto hidden md:block"></div>
+                <p class="bg-orange-700 text-gray-200 h-8 w-8 text-center rounded-full font-serif">.</p>
+              </div>
+            </li>
         </ul>
+
+      </div>
+    </div>
+
+    <div class="bg-orange-200 text-orange-900 w-full">
+      <div class="max-w-4xl mx-auto p-10 text-lg">
+        <h1 class="text-4xl font-heading font-extrabold lowercase text-center mb-5">Frequently asked questions</h1>
+
+        <details>
+          <summary class="text-xl">Why are there two goals?</summary>
+          <p class="p-5">We need enough money to be able to print out 1,000 copies of Snipette—but there's no point in having so many copies if there's nobody to send them to! That's why we required at least 750 people to have signed up, so that we can send out most of the copies to them.</p>
+        </details>
+
+        <details>
+          <summary class="text-xl">What happens to surplus copies?</summary>
+          <p class="p-5">
+            We aren't sure, to be honest, but the surplus copies could end up being used in any of the following ways:
+            <ul class="list-disc mx-12">
+              <li>Distributing "author copies" to Snipette authors, to thank them for all the time and effort they put in to creating our articles</li>
+              <li>TK more stuff...</li>
+            </ul>
+          </p>
+        </details>
+
       </div>
     </div>