css accordion

src/components/AccordionItem.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+
+interface IProps {
+	children: ReactNode;
+	title: string;
+	id: string;
+}
+
+const AccordionItem = ({ title, id, children }: IProps) => (
+	<div className="hero__accordion-item">
+		<details className="hero__accordion-details" name="linked">
+			<summary
+				className="hero__accordion-item__summary"
+				aria-describedby={title}
+			>
+				<span className="hero__accordion-item__title-container" role="term">
+					<p className="hero__accordion-item__title">{title}</p>
+				</span>
+			</summary>
+		</details>
+
+		<div className="hero__accordion-item__content">
+			<p
+				className="hero__accordion-item__content__inner"
+				role="definition"
+				id={id}
+			>
+				{children}
+			</p>
+		</div>
+	</div>
+);
+
+export default AccordionItem;

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>
 );

src/styles.css

@@ -1,4 +1,6 @@
 @import "tailwindcss";
+@import "./styles/_accordion.css";
+
 @plugin "@tailwindcss/typography";
 
 /* inter-latin-wght-normal */
@@ -92,33 +94,6 @@ body {
   }
 }
 
-
-/*a {*/
-/*  text-decoration-thickness: 1px;*/
-/*  text-underline-offset: 2px;*/
-/*}*/
-
-/*a:hover {*/
-/*  color: #246f76;*/
-/*}*/
-
-/*.page-wrap {*/
-/*  width: min(1080px, calc(100% - 2rem));*/
-/*  margin-inline: auto;*/
-/*}*/
-
-/*button,*/
-/*a {*/
-/*  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,*/
-/*    transform 180ms ease;*/
-/*}*/
-
-/*@media (max-width: 640px) {*/
-/*  .nav-link::after {*/
-/*    bottom: -4px;*/
-/*  }*/
-/*}*/
-
 .rise-in {
   animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
 }

src/styles/_accordion.css

@@ -0,0 +1,73 @@
+.hero__accordion-container {
+	grid-column: 1 / -1;
+	max-width: 600px;
+	padding: 1rem;
+}
+
+.hero__accordion-item {
+	overflow: clip;
+	transition-property: all;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	transition-duration: 0.15s;
+	cursor: pointer;
+	padding: 1rem 0;
+}
+
+.hero__accordion-item:not(:last-child) {
+	border-bottom: 1px solid var(--neutral-content);
+}
+
+.hero__accordion-details[open] + .hero__accordion-item__content {
+	grid-template-rows: 1fr;
+	padding: 10px;
+}
+
+.hero__accordion-details[open] .hero__accordion-item__title-container:after {
+	transform: rotate(270deg);
+}
+
+.hero__accordion-item__summary {
+	display: block;
+
+	&::-webkit-details-marker {
+		display: none;
+	}
+}
+
+.hero__accordion-item__title-container {
+	display: flex;
+	justify-content: space-between;
+
+	&:after {
+		content: "\276F";
+		color: var(--base-content);
+		margin-right: 1rem;
+		transform: rotate(90deg);
+		transition: transform 0.3s ease;
+	}
+}
+
+.hero__accordion-item__title {
+	color: var(--base-content);
+	font-size: 1.25rem;
+	font-weight: 600;
+}
+
+.hero__accordion-item__content {
+	padding: 0 10px;
+	display: grid;
+	grid-template-rows: 0fr;
+	transition:
+		grid-template-rows 0.3s ease,
+		padding 0.3s ease;
+
+	@media (prefers-reduced-motion) {
+		transition: none;
+	}
+}
+
+.hero__accordion-item__content__inner {
+	color: var(--neutral-content);
+	overflow: hidden;
+	margin: 0;
+}