From 7fbf493a24aed5b8a65c12e9d6b9ea745ac2e53c Mon Sep 17 00:00:00 2001
From: Dylan Coots <dc@buildmidwestern.com>
Date: Wed, 31 Jul 2024 15:51:36 -0500
Subject: [PATCH] next pass on faq page; adds content

---
 public/images/icons/faq-engineering.svg |  8 ++++
 public/images/icons/faq-marketing.svg   |  7 +++
 public/images/icons/faq-pm.svg          |  5 ++
 public/images/icons/faq-sales.svg       |  5 ++
 public/images/icons/faq-support.svg     |  4 ++
 src/pages/faq.astro                     | 62 ++++++++++++++++++++++++-
 6 files changed, 89 insertions(+), 2 deletions(-)
 create mode 100644 public/images/icons/faq-engineering.svg
 create mode 100644 public/images/icons/faq-marketing.svg
 create mode 100644 public/images/icons/faq-pm.svg
 create mode 100644 public/images/icons/faq-sales.svg
 create mode 100644 public/images/icons/faq-support.svg

diff --git a/public/images/icons/faq-engineering.svg b/public/images/icons/faq-engineering.svg
new file mode 100644
index 0000000..d636857
--- /dev/null
+++ b/public/images/icons/faq-engineering.svg
@@ -0,0 +1,8 @@
+<svg width="78" height="76" viewBox="0 0 78 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="77.8164" y="33.2627" width="4.03186" height="77.8148" transform="rotate(90 77.8164 33.2627)" fill="#341830"/>
+<rect x="77.8164" y="22.1748" width="4.03186" height="77.8148" transform="rotate(90 77.8164 22.1748)" fill="#341830"/>
+<rect x="77.8164" y="11.0879" width="4.03186" height="77.8148" transform="rotate(90 77.8164 11.0879)" fill="#341830"/>
+<rect x="77.8164" width="4.03186" height="77.8148" transform="rotate(90 77.8164 0)" fill="#341830"/>
+<path d="M0 0H37.8C37.8 20.5368 21.1323 37.2044 0.595276 37.2044H0V0Z" fill="#FFA229"/>
+<path d="M76.5156 37.2949L76.5156 75.0949C55.9788 75.0949 39.3113 58.4272 39.3113 37.8902L39.3113 37.2949L76.5156 37.2949Z" fill="#FF763E"/>
+</svg>
diff --git a/public/images/icons/faq-marketing.svg b/public/images/icons/faq-marketing.svg
new file mode 100644
index 0000000..0033462
--- /dev/null
+++ b/public/images/icons/faq-marketing.svg
@@ -0,0 +1,7 @@
+<svg width="77" height="76" viewBox="0 0 77 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="39.0352" y="40.6357" width="37.4277" height="4.27746" fill="#341830"/>
+<rect x="39.0352" y="50.9014" width="37.4277" height="4.27746" fill="#341830"/>
+<rect x="39.0352" y="61.168" width="37.4277" height="4.27746" fill="#341830"/>
+<rect x="38.3945" width="38.0694" height="35.7168" fill="#FF763E"/>
+<rect x="0.539062" y="33.5781" width="41.0636" height="40.422" fill="#FFA300"/>
+</svg>
diff --git a/public/images/icons/faq-pm.svg b/public/images/icons/faq-pm.svg
new file mode 100644
index 0000000..317f473
--- /dev/null
+++ b/public/images/icons/faq-pm.svg
@@ -0,0 +1,5 @@
+<svg width="77" height="76" viewBox="0 0 77 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M75.0001 36.7891C75.0001 46.6581 71.0797 56.1228 64.1012 63.1012C57.1228 70.0797 47.6581 74.0001 37.7891 74.0001C27.9201 74.0001 18.4554 70.0797 11.477 63.1012C4.49856 56.1228 0.578126 46.6581 0.578125 36.7891L37.7891 36.7891L75.0001 36.7891Z" fill="#0A9396"/>
+<circle cx="37.8302" cy="36.8282" r="16.1232" fill="#FFA229"/>
+<path d="M62.4758 36.8277C62.4758 23.215 51.4405 12.1797 37.8277 12.1797C24.215 12.1797 13.1797 23.215 13.1797 36.8277" stroke="#341830" stroke-width="2.22388"/>
+</svg>
diff --git a/public/images/icons/faq-sales.svg b/public/images/icons/faq-sales.svg
new file mode 100644
index 0000000..c508d0c
--- /dev/null
+++ b/public/images/icons/faq-sales.svg
@@ -0,0 +1,5 @@
+<svg width="78" height="76" viewBox="0 0 78 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="38.062" cy="39.0073" r="18.7495" fill="#341830"/>
+<path d="M39.3547 75.8521L77.0273 40.0771L40.4308 39.0083L39.3547 75.8521Z" fill="#FF763E"/>
+<path d="M0.777203 36.6121L37.6367 0L37.6367 36.6121L0.777203 36.6121Z" fill="#FF763E"/>
+</svg>
diff --git a/public/images/icons/faq-support.svg b/public/images/icons/faq-support.svg
new file mode 100644
index 0000000..cac4a0e
--- /dev/null
+++ b/public/images/icons/faq-support.svg
@@ -0,0 +1,4 @@
+<svg width="76" height="78" viewBox="0 0 76 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M65.1339 65.8947C59.8066 71.2221 53.0191 74.85 45.6298 76.3199C38.2405 77.7897 30.5813 77.0353 23.6208 74.1522C16.6602 71.269 10.711 66.3866 6.52526 60.1222C2.33957 53.8579 0.105469 46.4931 0.105469 38.959C0.105469 31.425 2.33957 24.0601 6.52526 17.7958C10.711 11.5315 16.6602 6.64902 23.6208 3.76587C30.5813 0.882716 38.2405 0.128352 45.6298 1.59817C53.0191 3.06799 59.8066 6.69598 65.1339 12.0233L38.1983 38.959L65.1339 65.8947Z" fill="#0A9396"/>
+<path d="M74.9992 61.9347L74.8452 16.201L52.0553 38.9909L74.9992 61.9347Z" fill="#FF763E"/>
+</svg>
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index cd55af2..d7da05a 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -100,7 +100,65 @@ import Collapse from '../components/Collapse.astro';
           collapseID="collapse-3"
         >
           <div class="relative flex flex-wrap pb-[3rem]">
-            Test 3
+            Fair Source provides many of the same benefits for companies as Open Source, by helping to foster an engaged developer community around your software products.
+            In “The sodSingle-Vendor Commercial Open Source Business Model,, Professor Dirk Riehle of the University of Erlangen has identified the following benefits of such a community, by business function:
+          </div>
+          <div class="w-full flex flex-wrap py-[3rem] items-center">
+            <div class="w-12/12 lg:w-1/3 lg:pr-[0.75rem]">
+              <div class="border border-borderGray rounded-small p-[2rem] flex flex-wrap items-center">
+                <div class="w-12/12 lg:w-1/6">
+                  <img src="/images/icons/faq-sales.svg" alt="sales"/>
+                </div>
+                <div class="pl-[1.5rem] w-12/12 lg:w-5/6">
+                  <h3>Sales</h3>
+                  <p>More and easier sales due to customer-side champions.</p>
+                </div>
+              </div>
+            </div>
+            <div class="w-12/12 lg:w-1/3 lg:pl-[0.75rem]">
+              <div class="border border-borderGray rounded-small p-[2rem] flex flex-wrap items-center">
+                <div class="w-12/12 lg:w-1/6">
+                  <img src="/images/icons/faq-marketing.svg" alt="marketing" />
+                </div>
+                <div class="pl-[1.5rem] w-12/12 lg:w-5/6">
+                  <h3>Marketing</h3>
+                  <p>Effective and cheaper marketing through engaged community.</p>
+                </div>
+              </div>
+            </div>
+            <div class="w-12/12 lg:w-1/3 lg:pl-[0.75rem]">
+              <div class="border border-borderGray rounded-small p-[2rem] flex flex-wrap items-center">
+                <div class="w-12/12 lg:w-1/6">
+                  <img src="/images/icons/faq-pm.svg" alt="product management" />
+                </div>
+                <div class="pl-[1.5rem] w-12/12 lg:w-5/6">
+                  <h3>Product Management</h3>
+                  <p>Superior product thanks to broad and deep user innovation.</p>
+                </div>
+              </div>
+            </div>
+            <div class="w-12/12 lg:w-1/3 lg:pl-[0.75rem]">
+              <div class="border border-borderGray rounded-small p-[2rem] flex flex-wrap items-center">
+                <div class="w-12/12 lg:w-1/6">
+                  <img src="/images/icons/faq-engineering.svg" alt="engineering" />
+                </div>
+                <div class="pl-[1.5rem] w-12/12 lg:w-5/6">
+                  <h3>Engineering</h3>
+                  <p>Faster development with immediate community feedback.</p>
+                </div>
+              </div>
+            </div>
+            <div class="w-12/12 lg:w-1/3 lg:pl-[0.75rem]">
+              <div class="border border-borderGray rounded-small p-[2rem] flex flex-wrap items-center">
+                <div class="w-12/12 lg:w-1/6">
+                  <img src="/images/icons/faq-support.svg" alt="support" />
+                </div>
+                <div class="pl-[1.5rem] w-12/12 lg:w-5/6">
+                  <h3>Support</h3>
+                  <p>Lower support costs thanks to self-supporting user community.</p>
+                </div>
+              </div>
+            </div>
           </div>
         </Collapse>
         <Collapse 
@@ -108,7 +166,7 @@ import Collapse from '../components/Collapse.astro';
           collapseID="collapse-4"
         >
           <div class="relative flex flex-wrap pb-[3rem]">
-            Test 3
+            The basic steps to adopt Fair Source are to plan for community engagement, to audit and publish your source code, and to announce that you are now Fair Source. For more details read our guide, The Single-Vendor Commercial Open Source Business Model
           </div>
         </Collapse>
         <Collapse