feat(faqs): wire FaqPage component and reformat faqs.mdx content

PageLayout now imports FaqPage and routes the faqs slug through it,
passing the page content as a slot (accordion and search are handled by
the component). Also passes subtitle="FAQs" to PageHero for the split
title/subtitle hero treatment.

faqs.mdx is cleaned up to match what FaqPage.astro expects as input:
- removes the old Button import and the duplicate h2 headings that are
  now rendered by the component itself
- reformats all answers from loose markdown text to explicit HTML
  elements (p, ul, ol, h4, h5) so the accordion parser receives
  well-formed nodes rather than flat text runs
This commit is contained in:
2026-06-17 14:22:37 -07:00
parent ed2bda5c02
commit d0d8222e40
2 changed files with 459 additions and 547 deletions
File diff suppressed because it is too large Load Diff
+4 -1
View File
@@ -5,6 +5,7 @@ import TeamPage from '../components/TeamPage.astro';
import AboutPage from '../components/AboutPage.astro'; import AboutPage from '../components/AboutPage.astro';
import ServicesPage from '../components/ServicesPage.astro'; import ServicesPage from '../components/ServicesPage.astro';
import CareersPage from '../components/CareersPage.astro'; import CareersPage from '../components/CareersPage.astro';
import FaqPage from '../components/FaqPage.astro';
import PageHero from '../components/PageHero.astro'; import PageHero from '../components/PageHero.astro';
import { pageHeroImages } from '../data/page-visuals'; import { pageHeroImages } from '../data/page-visuals';
const { entry } = Astro.props; const { entry } = Astro.props;
@@ -52,7 +53,7 @@ const isService = Boolean(serviceTitles[entry.data.lang]?.[entry.data.slug]);
const heroImage = pageHeroImages[entry.data.slug]; const heroImage = pageHeroImages[entry.data.slug];
--- ---
<BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage || heroImage} lang={entry.data.lang}> <BaseLayout title={entry.data.title} description={entry.data.description} canonical={entry.data.canonical} image={entry.data.featuredImage || heroImage} lang={entry.data.lang}>
<PageHero title={bannerTitle} image={heroImage} constrain /> <PageHero title={bannerTitle} subtitle={entry.data.slug === 'faqs' ? 'FAQs' : undefined} image={heroImage} constrain />
{entry.data.slug === 'team' && entry.data.lang === 'en' {entry.data.slug === 'team' && entry.data.lang === 'en'
? <TeamPage /> ? <TeamPage />
: entry.data.slug === 'about' && entry.data.lang === 'en' : entry.data.slug === 'about' && entry.data.lang === 'en'
@@ -61,6 +62,8 @@ const heroImage = pageHeroImages[entry.data.slug];
? <ServicesPage /> ? <ServicesPage />
: entry.data.slug === 'careers' && entry.data.lang === 'en' : entry.data.slug === 'careers' && entry.data.lang === 'en'
? <CareersPage /> ? <CareersPage />
: entry.data.slug === 'faqs' && entry.data.lang === 'en'
? <FaqPage><slot /></FaqPage>
: <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>} : <article class:list={['prose', 'source-page', 'container', { 'service-page': isService }]}><slot /></article>}
{showForm && <FormShell title={bannerTitle} showBackground={entry.data.slug === 'client-consultation'} />} {showForm && <FormShell title={bannerTitle} showBackground={entry.data.slug === 'client-consultation'} />}
</BaseLayout> </BaseLayout>