An FAQ list styled as a library card catalogue, where topics open as drawers and each question lifts like an index card to reveal its answer on a ruled face.
Loading preview...
"use client";
import {
CardCatalogueFaq,
type Drawer,
} from "@/components/ui/card-catalogue-faq";
const DRAWERS: Drawer[] = [
{
id: "billing",
label: "Billing",
cards: [
{
q: "Can I pay in Omani rials?",
a: "Yes. Choose OMR at checkout and we invoice in rials with VAT shown separately; card and bank transfer both work.",
},
{
q: "What happens if I go over my build minutes?",
a: "Builds keep running. Extra minutes are billed at $1 per 100 at the end of the month, and we email you at 80% so it's never a surprise.",
},
{
q: "Do you refund unused months on a yearly plan?",
a: "Within the first 30 days, in full. After that we refund the remaining whole months if you're leaving because something didn't work.",
},
],
},
{
id: "security",
label: "Security",
cards: [
{
q: "Where is my code built?",
a: "In isolated containers in Frankfurt or Bahrain, your choice per project. Containers are destroyed after each build.",
},
{
q: "Do you support single sign-on?",
a: "On Business: SAML with Okta, Azure AD and Google Workspace, plus SCIM so leavers lose access the day they leave.",
},
],
},
{
id: "deploys",
label: "Deploys",
cards: [
{
q: "How long does a deploy take?",
a: "A typical Next.js site builds in 40 to 90 seconds. Cached dependencies make the second deploy of a branch noticeably faster.",
},
{
q: "Can I roll back from my phone?",
a: "Yes, from the app or by replying ROLLBACK to the deploy notification email.",
},
],
},
];
export default function CardCatalogueFaqNightDemo() {
return (
<div className="flex min-h-full w-full justify-center bg-[#0e0c0b] px-4 py-10 text-[#e8d3b0] sm:px-10">
<div className="w-full max-w-[44rem]">
<p className="mb-4 font-mono text-[0.6875rem] uppercase tracking-[0.14em] text-[#9a8f84]">
Help · Filed by topic
</p>
<CardCatalogueFaq drawers={DRAWERS} theme="night" />
</div>
</div>
);
}
