css accordion

src/pages/index.tsx

@@ -1,8 +1,8 @@
 import { Link } from "@tanstack/react-router";
 import { Image } from "@unpic/react";
+import AccordionItem from "#/components/AccordionItem.tsx";
 import Feature from "#/components/Feature.tsx";
 import Section from "#/components/Section.tsx";
-
 import examplePdf1 from "@/assets/images/examplepdf1.webp?url";
 import examplePdf2 from "@/assets/images/examplepdf2.webp?url";
 
@@ -65,7 +65,30 @@ const Home = () => (
 			smallTitle="FAQs"
 			description="Below we answer some of the most common questions we get regarding this service."
 		>
-			<p>section content</p>
+			<div className="hero__accordion-container">
+				<AccordionItem title="Is this service free?" id="accordion-1">
+					Yes. There are no current plans to charge for this service. If in the
+					future there is a payment plan, it will come with a generous free
+					tier.
+				</AccordionItem>
+
+				<AccordionItem
+					title="Will you be adding more features?"
+					id="accordion-2"
+				>
+					We have a lot more features to implement in the near future. If you
+					have a feature that you would like to see implemented, please feel
+					free to send us a message via our contact form.
+				</AccordionItem>
+
+				<AccordionItem
+					title="Do you hold any copyright on the produced materials?"
+					id="accordion-3"
+				>
+					No. We will never implement any terms whereby we have any interest in
+					the materials created with this service.
+				</AccordionItem>
+			</div>
 		</Section>
 	</main>
 );