feat: add faq to pricing page

Author: ngnijland

docs/src/content.config.ts

@@ -2,7 +2,7 @@ import { glob } from "astro/loaders";
 import { z, defineCollection } from "astro:content";
 
 import { pricingCollection } from "./types/pages.collection";
-import {comparePlansSectionCollection, pricingSectionCollection, statisticsSectionCollection } from "./types/sections.collections";
+import {comparePlansSectionCollection, faqSectionCollection, pricingSectionCollection, statisticsSectionCollection } from "./types/sections.collections";
 
 
 
@@ -36,4 +36,4 @@ const feature = defineCollection({
     }),
 });
 
-export const collections = { feature, pricing: pricingCollection, comparePlansSectionCollection, pricingSectionCollection, statisticsSectionCollection };
+export const collections = { feature, pricing: pricingCollection, comparePlansSectionCollection, faqSectionCollection, pricingSectionCollection, statisticsSectionCollection };

docs/src/content/sections/faq.md

@@ -0,0 +1,14 @@
+---
+enable: true
+title: "Frequently Asked <em>Questions</em>"
+list:
+  - enable: true
+    question: "What is included in the trial plan?"
+    answer: "Trial plan include everything available for the Teams plan."
+  - enable: true
+    question: "What happens when my trials is over?"
+    answer: "You will have the option to convert to a paying plan or you'll loose access to RocketSim Pro features and team build insights."
+  - enable: true
+    question: "Can I cancel, upgrade, or downgrade anytime?"
+    answer: "Yes. You can cancel, upgrade, or downgrade your plan via your subscription settings within the web app. All cancellations and downgrades will take place at the end of your plan cycle, while upgrades will take place immediately."
+---

docs/src/layouts/partials/FaqSection.astro

@@ -0,0 +1,30 @@
+---
+import { markdownify } from "@/lib/utils/textConverter";
+import Accordion from "@/shortcodes/Accordion";
+import type { CollectionEntry } from "astro:content";
+import { getEntry } from "astro:content";
+
+const sectionData = (await getEntry("faqSectionCollection", "faq")) as CollectionEntry<"faqSectionCollection">;
+const { title, list } = sectionData.data;
+---
+
+<section class="section" id="faq_section">
+  <div class="container">
+    <div class="section-container gap-10">
+      <div class="section-intro text-center">
+        <h2 set:html={markdownify(title)} class="title hasEmphasize" data-aos="fade-up-sm" data-aos-delay="0" />
+      </div>
+      <div class="section-content space-y-5">
+        {
+          list.map((item, index) => (
+            <div data-aos="fade-up-sm" data-aos-delay={100 * index}>
+              <Accordion client:load title={item.question}>
+                <div set:html={markdownify(item.answer)} />
+              </Accordion>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  </div>
+</section>

docs/src/layouts/shortcodes/Accordion.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+
+const Accordion = ({
+  title,
+  children,
+  className,
+}: {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  const [show, setShow] = useState(false);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+  const [height, setHeight] = React.useState(show ? "auto" : "0px");
+
+  React.useEffect(() => {
+    if (show) {
+      setHeight(`${contentRef.current?.scrollHeight}px`);
+    } else {
+      setHeight("0px");
+    }
+  }, [show]);
+
+  return (
+    <div className={`accordion  ${className}`}>
+      <button className="accordion-header" onClick={() => setShow(!show)}>
+        {title}
+
+        <div className="inline-block accordion-icon">
+          <svg
+            className={` transition-transform duration-500 ${show ? "rotate-180" : ""}`}
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line
+              x1="12"
+              y1="5"
+              x2="12"
+              y2="19"
+              className={`transition-opacity duration-500 ${show ? "opacity-0" : "opacity-100"}`}
+            ></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+        </div>
+      </button>
+      <div ref={contentRef} style={{ height, overflow: "hidden", transition: "height 0.5s ease" }}>
+        {show && <div className={show ? "accordion-content [&_*]:text-base [&_*]:m-0" : "mt-0"}>{children}</div>}
+      </div>
+    </div>
+  );
+};
+
+export default Accordion;

docs/src/pages/pricing.astro

@@ -6,6 +6,7 @@ import PageHeader from "@/partials/PageHeader.astro";
 import PricingSection from "@/partials/PricingSection.astro";
 import ComparePlans from "@/partials/ComparePlans.astro";
 import Statistics from "@/partials/Statistics.astro";
+import FaqSection from "@/partials/FaqSection.astro";
 
 const pageIndex = await getEntry("pricing", "-index");
 if (!pageIndex) return null;
@@ -19,4 +20,5 @@ const { hero, title, meta_title, description } = pageIndex.data;
   </div>
   <ComparePlans />
   <Statistics isFluid="true" />
+  <FaqSection />
 </Base>

docs/src/types/sections.collections.ts

@@ -32,6 +32,23 @@ export const comparePlansSectionCollection = defineCollection({
   }),
 });
 
+// FAQ Section collection schema
+export const faqSectionCollection = defineCollection({
+  loader: glob({
+    pattern: "faq.{md,mdx}",
+    base: "src/content/sections",
+  }),
+  schema: z.object({
+    title: z.string(),
+    list: z.array(
+      z.object({
+        question: z.string(),
+        answer: z.string(),
+      })
+    ),
+  }),
+});
+
 // Pricing Section collection schema
 export const pricingSectionCollection = defineCollection({
   loader: glob({