68 lines
2.2 KiB
Text
68 lines
2.2 KiB
Text
---
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
import Breadcrumbs from "../components/Breadcrumbs.astro";
|
|
import { SITE } from "../lib/blog-data.js";
|
|
|
|
// Plain-text answers so the visible content exactly matches the FAQPage schema.
|
|
// Replace these placeholders with your own questions in app/src/pages/faq.astro.
|
|
const faqs = [
|
|
{
|
|
q: "What is this site about?",
|
|
a: "Replace this with a short description of what your site covers and who it is for.",
|
|
},
|
|
{
|
|
q: "How often is it updated?",
|
|
a: "Tell visitors how frequently you publish and what they can expect from new content.",
|
|
},
|
|
{
|
|
q: "How can I get in touch?",
|
|
a: "Point people to your contact page or email, and update this answer to match how you prefer to be reached.",
|
|
},
|
|
];
|
|
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "FAQPage",
|
|
"@id": `${SITE.url}/faq#faq`,
|
|
mainEntity: faqs.map((f) => ({
|
|
"@type": "Question",
|
|
name: f.q,
|
|
acceptedAnswer: { "@type": "Answer", text: f.a },
|
|
})),
|
|
};
|
|
---
|
|
|
|
<BaseLayout
|
|
title={`FAQ - ${SITE.name}`}
|
|
description={`Frequently asked questions about ${SITE.name}.`}
|
|
canonical="/faq"
|
|
jsonLd={jsonLd}
|
|
>
|
|
<div class="mx-auto max-w-3xl px-5 py-12">
|
|
<Breadcrumbs items={[{ label: "Home", to: "/" }, { label: "FAQ" }]} />
|
|
|
|
<header class="mt-6">
|
|
<div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">FAQ</div>
|
|
<h1 class="mt-2 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
|
|
Frequently asked questions
|
|
</h1>
|
|
<p class="mt-4 max-w-xl text-muted-foreground">
|
|
Quick answers to common questions. Edit these in <code>app/src/pages/faq.astro</code>.
|
|
</p>
|
|
</header>
|
|
|
|
<div class="mt-10 divide-y divide-border">
|
|
{
|
|
faqs.map((f) => (
|
|
<details class="group py-5">
|
|
<summary class="flex cursor-pointer items-center justify-between gap-4 font-serif text-lg font-semibold tracking-tight marker:content-['']">
|
|
{f.q}
|
|
<span class="text-muted-foreground transition-transform group-open:rotate-45">+</span>
|
|
</summary>
|
|
<p class="mt-3 leading-relaxed text-muted-foreground">{f.a}</p>
|
|
</details>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</BaseLayout>
|