shellphone.app/app/features/public-area/components/faqs.tsx

import type { FunctionComponent, PropsWithChildren } from "react";
import { Disclosure, Transition } from "@headlessui/react";
import clsx from "clsx";

import Container from "./container";

import backgroundImage from "../images/background-faqs.webp";

export default function Faqs() {
	return (
		<section id="faq" aria-labelledby="faq-title" className="relative overflow-hidden bg-slate-50 py-20 sm:py-32">
			<img
				className="absolute top-0 left-1/2 max-w-none translate-x-[-30%] -translate-y-1/4"
				src={backgroundImage}
				alt=""
				width={1558}
				height={946}
			/>
			<Container className="relative">
				<div className="mx-auto max-w-2xl lg:mx-0">
					<h2
						id="faq-title"
						className="font-mackinac font-bold text-3xl tracking-tight text-slate-900 sm:text-4xl"
					>
						Frequently asked questions
					</h2>
				</div>
				<ul className="mt-16 grid grid-cols-1 max-w-3xl mx-auto pl-12 lg:mx-0">
					<Accordion title="How does it work?">
						Shellphone is your go-to app to use your phone number over the internet. It integrates
						seamlessly with Twilio to provide the best experience for your personal cloud phone.
					</Accordion>
					<Accordion title="What do I need to use Shellphone?">
						Shellphone is still in its early stages and we&#39;re working hard to make it as easy-to-use as
						possible. Currently, you must have a Twilio account to set up your personal cloud phone with
						Shellphone.
					</Accordion>
					<Accordion title="Why would I use this over an eSIM?">
						Chances are you&#39;re currently using an eSIM-compatible device. eSIMs are a reasonable way of
						using a phone number internationally but they are still subject to some irky limitations. For
						example, you can only use an eSIM on one device at a time and you are still subject to
						exorbitant rates from your carrier.
					</Accordion>
					<Accordion title="Does it work with 2FA messages?">
						Some banks and online services refuse to send two-factor authentication messages to a virtual
						phone number and we do not have a solution around this yet. Moreover, Twilio does not support
						receiving incoming SMS from external Alphanumeric Sender IDs is to protect accounts getting
						bombarded from spam messages from these IDs which are used to send one-way SMS.
						<br />
						With that said, we have successfully received 2FA messages from many services including WhatsApp
						and Uber. We recognize this is a common problem for people who want to switch to a virtual phone
						number and we are doing our best to find a long-term solution to receive 2FA messages.
					</Accordion>
					<span className="block border-t border-gray-200" aria-hidden="true" />
				</ul>
			</Container>
		</section>
	);
}

function FAQs() {
	return (
		<section className="max-w-6xl mx-auto px-4 sm:px-6">
			<div className="py-12 md:py-20">
				<div className="max-w-3xl mx-auto text-center pb-20">
					<h2 className="h2 font-mackinac">Questions & Answers</h2>
				</div>

				<ul className="max-w-3xl mx-auto pl-12">
					<Accordion title="How does it work?">
						Shellphone is your go-to app to use your phone number over the internet. It integrates
						seamlessly with Twilio to provide the best experience for your personal cloud phone.
					</Accordion>
					<Accordion title="What do I need to use Shellphone?">
						Shellphone is still in its early stages and we&#39;re working hard to make it as easy-to-use as
						possible. Currently, you must have a Twilio account to set up your personal cloud phone with
						Shellphone.
					</Accordion>
					<Accordion title="Why would I use this over an eSIM?">
						Chances are you&#39;re currently using an eSIM-compatible device. eSIMs are a reasonable way of
						using a phone number internationally but they are still subject to some irky limitations. For
						example, you can only use an eSIM on one device at a time and you are still subject to
						exorbitant rates from your carrier.
					</Accordion>
					<span className="block border-t border-gray-200" aria-hidden="true" />
				</ul>
			</div>
		</section>
	);
}

const Accordion: FunctionComponent<PropsWithChildren<{ title: string }>> = ({ title, children }) => {
	return (
		<Disclosure>
			{({ open }) => (
				<>
					<Disclosure.Button className="flex items-center w-full text-lg font-medium text-left py-5 border-t border-gray-200">
						<svg
							className="w-4 h-4 fill-current text-rebeccapurple-500 flex-shrink-0 mr-8 -ml-12"
							viewBox="0 0 16 16"
							xmlns="http://www.w3.org/2000/svg"
						>
							<rect
								y="7"
								width="16"
								height="2"
								rx="1"
								className={clsx("transform origin-center transition duration-200 ease-out", {
									"rotate-180": open,
								})}
							/>
							<rect
								y="7"
								width="16"
								height="2"
								rx="1"
								className={clsx("transform origin-center transition duration-200 ease-out", {
									"rotate-90": !open,
									"rotate-180": open,
								})}
							/>
						</svg>
						<span>{title}</span>
					</Disclosure.Button>

					<Transition
						enter="transition duration-300 ease-in-out"
						enterFrom="transform scale-95 opacity-0"
						enterTo="transform scale-100 opacity-100"
						leave="transition duration-75 ease-out"
						leaveFrom="transform scale-100 opacity-100"
						leaveTo="transform scale-95 opacity-0"
					>
						<Disclosure.Panel className="text-gray-600 overflow-hidden">
							<p className="pb-5">{children}</p>
						</Disclosure.Panel>
					</Transition>
				</>
			)}
		</Disclosure>
	);
};