add faq

components/pages/landing-page.scss

@@ -38,7 +38,7 @@ html {
 }
 
 .landingPage__pricing {
-  padding: 2rem 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -303,3 +303,21 @@ html {
     color: #5a585d;
   }
 }
+
+.faq {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fff;
+  width: 100%;
+  padding-bottom: 4rem;
+
+  .rs-panel-group,
+  .rs-panel-btn {
+    font-size: 1.175rem;
+  }
+
+  .rs-panel-body {
+    color: #5a585d;
+  }
+}

components/pages/landing-page.tsx

@@ -3,6 +3,7 @@ import AppUnderline from "../partials/svg/underline";
 import Link from "next/link";
 import SalesCard from "../partials/sales-card/sales-card";
 import AppCalendar from "../partials/app-calendar/app-calendar";
+import {Accordion} from 'rsuite';
 
 export default function LandingPage() {
   return (
@@ -18,7 +19,7 @@ export default function LandingPage() {
           </h1>
 
           <h2 className={'heroSubHeading'}>
-            Spare yourself the hassle of getting it all right: forms, calendar toggles, drag-to-create events. Someone already built all that for you.
+            Don't waste time building stuff like forms, calendar toggles, or drag-to-create. Someone already built all that for you.
           </h2>
 
           <div className={'landingPageActions'}>
@@ -38,7 +39,11 @@ export default function LandingPage() {
           <AppCalendar/>
         </section>
 
-        <section id={'pricing'} className={'landingPage landingPage__pricing'}>
+        <section style={{position: 'relative'}} id={'pricing'} className={'landingPage landingPage__pricing'}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 230">
+            <path fill="#fff" fillOpacity="1" d="M0,64L480,160L960,64L1440,96L1440,0L960,0L480,0L0,0Z"></path>
+          </svg>
+
           <h2 className={'pricingHeading heading-font'}>Pricing</h2>
 
           <div className={'landingPageCards'}>
@@ -74,6 +79,32 @@ export default function LandingPage() {
               buttonClass={'black'}
             />
           </div>
+
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 230">
+            <path fill="#fff" fill-opacity="1" d="M0,64L480,160L960,64L1440,96L1440,320L960,320L480,320L0,320Z"></path>
+          </svg>
+        </section>
+
+        <section className={'faq'}>
+          <h2 className={'pricingHeading heading-font'}>FAQ</h2>
+
+          <Accordion style={{width: '100%', maxWidth: '950px'}}>
+            <Accordion.Panel header="Can I use the license commercially?" defaultExpanded>
+              <i>Yes, you can.</i> Though I plan to introduce an OEM license later, I believe in honoring those who believed in the project early on. You can continue using Schedule-X premium commercially without having to upgrade licenses later on, if you buy it before OEM licensing is introduced.
+            </Accordion.Panel>
+            <Accordion.Panel header="How many issues and feature requests are included?">
+              There is no limit to how many issues and feature requests you can submit. However, you buy the software <i>as is</i>, without any guarantee that I will build features that you request. If I believe that a feature is useful to many customers, I am more likely to build it.
+
+              <br />
+              <br />
+
+              If you want certainty that a feature will be built, you need to select an enterprise license so we can discuss the terms of the feature request.
+            </Accordion.Panel>
+            <Accordion.Panel header="Can I cache the software on my servers?">
+              Yes. This is even encouraged. For example, you can use software like <a href={"https://verdaccio.org/"} target={'_blank'} style={{ textDecoration: 'underline', color: '#6750a4' }}>Verdaccio</a> or JFrog artifactory. However,
+              <strong> this does not mean that you are allowed to use Schedule-X premium beyond the terms of the license you purchased.</strong> You need to pay the yearly subscription, for as long as the software is being used.
+            </Accordion.Panel>
+          </Accordion>
         </section>
       </div>
     </>

components/partials/sales-card/sales-card.scss

@@ -74,5 +74,9 @@
     box-shadow: 0 0 10px rgb(0 0 0 / 10%);
     cursor: pointer;
     margin-top: 1rem;
+
+    &:hover {
+      transform: translateY(-2px);
+    }
   }
 }