saasaloy 0.1.0

package/templates/base/apps/web/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@web/*": ["./src/*"]
+    }
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

package/templates/base/apps/web/wrangler.jsonc

@@ -0,0 +1,27 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "{{PROJECT_NAME}}-web",
+  "compatibility_date": "2026-07-22",
+  // Static assets, and still no Worker code — but the layout moved. Registering
+  // @astrojs/cloudflare in astro.config.mjs (for src/pages/500.astro) makes Astro build
+  // to dist/client + dist/server instead of a flat dist/. While every page is
+  // prerendered the adapter runs assets-only and leaves dist/server empty, so there is
+  // no `main` to point at here. Add one the day a page sets `prerender = false`, when
+  // the adapter writes the server entry.
+  //
+  // THIS FILE IS NOT THE CONFIG THAT DEPLOYS. The build writes
+  // .wrangler/deploy/config.json, which redirects wrangler to the adapter's own generated
+  // file at dist/client/wrangler.json — wrangler prints "Using redirected Wrangler
+  // configuration" when it does. The adapter merges what is below into that file and adds
+  // its own keys, so an edit here only reaches production through that merge. Read
+  // dist/client/wrangler.json off a real build to see what actually ships, and run
+  // `wrangler deploy --dry-run` after changing anything here.
+  "assets": {
+    "directory": "./dist/client",
+    // An address matching no asset gets dist/client/404.html with a real 404 status,
+    // instead of Cloudflare's empty miss. Do not change this to
+    // "single-page-application" — that is the admin app's setting, and here it would
+    // answer every typo with the home page at status 200.
+    "not_found_handling": "404-page",
+  },
+}

package/templates/base/commitlint.config.js

@@ -0,0 +1,9 @@
+// Conventional Commits (`feat:`, `fix(api):`, `chore(deps):` …), enforced by the
+// `commit-msg` hook. Scopes are free-form — add a `scope-enum` rule here if you
+// want to pin them down.
+//
+// Bypass for a genuine emergency: `git commit --no-verify`, or `HUSKY=0 git commit`
+// to skip every hook at once (which is also how CI avoids installing them).
+export default {
+  extends: ["@commitlint/config-conventional"],
+};

package/templates/base/lint-staged.config.js

@@ -0,0 +1,17 @@
+// The pre-commit half of `pnpm lint`, scoped to staged files.
+//
+// It deliberately does NOT run the type-aware pass (`pnpm lint:types`): type-aware
+// linting needs the whole project graph, which defeats the point of scoping to
+// staged files. `pnpm lint` — in CI, or by hand — is what catches those.
+//
+// Keep these globs in step with the `lint` scripts in package.json. Markdown is
+// absent on purpose: `.prettierignore` excludes it because Ultracite's Prettier
+// sets `proseWrap: "never"`.
+export default {
+  "*.{js,jsx,mjs,cjs,ts,tsx,astro}": [
+    "oxlint -c oxlint.config.mjs --fix --deny-warnings",
+    "prettier --write",
+  ],
+  "*.css": ["stylelint --fix --max-warnings 0", "prettier --write"],
+  "*.{json,jsonc,yaml,yml}": ["prettier --write"],
+};

package/templates/base/oxlint.config.mjs

@@ -0,0 +1,155 @@
+import { defineConfig } from "oxlint";
+import astro from "ultracite/oxlint/astro";
+import core from "ultracite/oxlint/core";
+import react from "ultracite/oxlint/react";
+
+// Run it as `oxlint -c oxlint.config.mjs` — the flag is not optional. oxlint only
+// auto-discovers `.oxlintrc.json`, and a JSON config cannot `extends` Ultracite's
+// presets: `extends` takes file paths, JSON only, while the presets are `.mjs`
+// modules. The JS config format is experimental and needs Node.js, which this
+// project already requires (>= 24).
+//
+// Add `ultracite/oxlint/tanstack` when an admin SPA lands, and
+// `ultracite/oxlint/vitest` when the first test file does. The full preset list is
+// angular, astro, core, jest, js-plugins, nestjs, next, qwik, react, remix, solid,
+// svelte, tanstack, vitest, vue.
+
+// DO NOT replace this with object spread. `{ ...core, ...react }` overwrites
+// `plugins` with react's three entries and silently drops core's eight
+// (eslint, typescript, unicorn, oxc, import, jsdoc, node, promise). The config
+// still loads and still reports *some* violations, so it looks like it works.
+// Arrays are unioned; `env` and `rules` are merged key-by-key, later preset wins.
+function mergePresets(...presets) {
+  const merged = {
+    env: {},
+    ignorePatterns: [],
+    overrides: [],
+    plugins: [],
+    rules: {},
+  };
+  for (const preset of presets) {
+    Object.assign(merged.env, preset.env);
+    Object.assign(merged.rules, preset.rules);
+    merged.ignorePatterns.push(...(preset.ignorePatterns ?? []));
+    merged.overrides.push(...(preset.overrides ?? []));
+    merged.plugins.push(...(preset.plugins ?? []));
+  }
+  merged.ignorePatterns = [...new Set(merged.ignorePatterns)];
+  merged.plugins = [...new Set(merged.plugins)];
+  return merged;
+}
+
+const ultracite = mergePresets(core, astro, react);
+
+// Rules turned off for the whole project, each with its reason. Ultracite enables
+// ~470, including whole families oxlint itself files under `style`, `pedantic` and
+// `restriction`. These are the ones that disagree with how the code Saasaloy ships
+// you is written — the base template AND every module `saasaloy add` drops in, which
+// is why the list is wider than the base alone needs. Turning one back on is fine;
+// expect to fix the module files it lands on.
+//
+// This is your config now. Keep the reasons if you edit it — a rule turned off
+// without one comes back as an argument later.
+const suppressed = {
+  // --- Declaration shape ---------------------------------------------------
+  // Ultracite prefers `const Foo = () => {}`. The vendored shadcn primitives and
+  // every block here use `function` declarations, which is also what shadcn's own
+  // registry emits — so turning these on means diverging from upstream on the next
+  // `shadcn add`. Module files put helpers below their callers for the same reason,
+  // which is the only thing `no-use-before-define` is reacting to.
+  "func-style": "off",
+  "no-use-before-define": "off",
+  "react/function-component-definition": "off",
+
+  // --- Comment placement ---------------------------------------------------
+  // Trailing explanatory comments are the house style in everything Saasaloy ships.
+  "no-inline-comments": "off",
+
+  // --- Async shape ---------------------------------------------------------
+  // Sequential awaits are deliberate where ordering matters, and `async` is kept on
+  // some functions (e.g. an email provider's `send`) to satisfy an interface even
+  // when that implementation has nothing to await.
+  "no-await-in-loop": "off",
+  "require-await": "off",
+
+  // --- Regular expressions -------------------------------------------------
+  // Adding `u` changes escape semantics and named capture groups mean rewriting
+  // every index-based match access. Both are mechanical-looking edits with real
+  // behaviour risk, and the email module's HTML escaping is full of them.
+  "prefer-named-capture-group": "off",
+  "require-unicode-regexp": "off",
+
+  // --- Key ordering and small style ----------------------------------------
+  // Props and config objects are grouped by meaning (`id`, then `title`, then the
+  // data). Alphabetising them loses that ordering for no benefit. `no-plusplus` and
+  // `method-signature-style` are pure preference.
+  "no-plusplus": "off",
+  "sort-keys": "off",
+  "typescript/method-signature-style": "off",
+
+  // --- Accessibility shape, not accessibility ------------------------------
+  // Fires on `<div role="group">` and friends: the roles are correct, and swapping
+  // in `<fieldset>`/`<output>` changes the markup's layout defaults. That is a
+  // design decision, not a lint fix.
+  "jsx-a11y/prefer-tag-over-role": "off",
+};
+
+export default defineConfig({
+  ...ultracite,
+
+  rules: {
+    ...ultracite.rules,
+    ...suppressed,
+    // Ultracite ships `no-console: "off"`. Turn it on: a stray `console.log` in a
+    // deployed Worker or a client bundle is a leak, not a log line. Add an override
+    // below for any file where console output is genuinely the feature.
+    "no-console": "error",
+  },
+
+  overrides: [
+    ...ultracite.overrides,
+
+    // Ultracite's core preset sets `env: { browser: true }` and nothing else, so
+    // Node globals have to be added where they apply.
+    {
+      files: ["*.config.{js,mjs,ts}", "apps/*/*.config.{js,mjs,ts}"],
+      env: { node: true },
+    },
+
+    // oxlint parses `.astro` natively — no parser wiring, no plugin chain. Both the
+    // `---` frontmatter and client `<script>` blocks are linted.
+    //
+    // KEEP `.astro` OUT OF THE TYPE-AWARE PASS (`pnpm lint:types`). `apps/web/tsconfig.json`
+    // includes the build-generated `.astro/types.d.ts`, so type-aware linting here
+    // would require `astro sync` before every `pnpm lint`, including on a fresh
+    // clone. That is why `lint:types` is scoped to `packages/ui/src` and the plain
+    // `lint:code` pass covers everything else. Do not merge the two.
+    {
+      files: ["**/*.astro"],
+      env: { astro: true, browser: true },
+    },
+
+    // React and Astro components are PascalCase by convention; unicorn wants
+    // kebab-case for every filename.
+    {
+      files: ["**/*.astro", "**/*.tsx"],
+      rules: { "unicorn/filename-case": "off" },
+    },
+
+    // The design system is vendored from shadcn and re-synced with
+    // `pnpm --filter @repo/ui exec shadcn add …`. `Label` is a primitive: the control
+    // it labels is supplied by the call site, which this rule cannot see.
+    {
+      files: ["packages/ui/src/components/**"],
+      rules: { "jsx-a11y/label-has-associated-control": "off" },
+    },
+
+    // Console output is the whole implementation of a console-backed provider —
+    // `saasaloy add email-console` lands one at `packages/email/src/providers/console.ts`.
+    // Everything else that wants to log should go through a real logger.
+    {
+      files: ["packages/*/src/providers/console.ts", "packages/logger*/**"],
+      rules: { "no-console": "off" },
+    },
+  ],
+});

package/templates/base/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "packageManager": "pnpm@11.14.0",
+  "engines": {
+    "node": ">=24.13.0",
+    "pnpm": ">=11"
+  },
+  "scripts": {
+    "prepare": "husky",
+    "build": "turbo run build",
+    "clean": "turbo run clean && rimraf -g node_modules .turbo \"{apps,packages}/*/node_modules\" \"{apps,packages}/*/.turbo\"",
+    "dev": "turbo run dev",
+    "lint": "pnpm run lint:types && pnpm run lint:code && pnpm run lint:css && pnpm run format:check",
+    "lint:types": "oxlint -c oxlint.config.mjs --type-aware --deny-warnings packages/ui/src",
+    "lint:code": "oxlint -c oxlint.config.mjs --deny-warnings .",
+    "lint:css": "stylelint \"**/*.css\" --max-warnings 0",
+    "lint:fix": "oxlint -c oxlint.config.mjs --type-aware --fix packages/ui/src && oxlint -c oxlint.config.mjs --fix . && stylelint \"**/*.css\" --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "typecheck": "turbo run typecheck"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "21.2.2",
+    "@commitlint/config-conventional": "21.2.2",
+    "husky": "9.1.7",
+    "lint-staged": "17.4.1",
+    "oxlint": "1.81.0",
+    "oxlint-tsgolint": "7.0.2001",
+    "prettier": "3.9.6",
+    "prettier-plugin-astro": "0.14.1",
+    "prettier-plugin-tailwindcss": "0.8.1",
+    "rimraf": "6.1.3",
+    "stylelint": "17.14.1",
+    "stylelint-config-idiomatic-order": "10.0.0",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-prettier": "5.0.3",
+    "turbo": "2.10.12",
+    "typescript": "7.0.2",
+    "ultracite": "7.10.7"
+  }
+}

package/templates/base/packages/tsconfig/base.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "verbatimModuleSyntax": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  }
+}

package/templates/base/packages/tsconfig/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@repo/tsconfig",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "files": [
+    "base.json"
+  ],
+  "exports": {
+    "./base.json": "./base.json"
+  },
+  "scripts": {
+    "clean": "rimraf -g dist \"*.tsbuildinfo\""
+  },
+  "devDependencies": {
+    "rimraf": "6.1.3"
+  }
+}

package/templates/base/packages/ui/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@repo/ui/components",
+    "ui": "@repo/ui/components",
+    "lib": "@repo/ui/lib",
+    "utils": "@repo/ui/lib/utils"
+  }
+}

package/templates/base/packages/ui/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@repo/ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./content/*": "./src/content/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./blocks/*": "./src/blocks/*.tsx",
+    "./containers/*": "./src/containers/*.tsx"
+  },
+  "scripts": {
+    "clean": "rimraf -g dist \"*.tsbuildinfo\"",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.7.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "lucide-react": "1.39.0",
+    "shadcn": "4.20.1",
+    "tailwind-merge": "3.6.0",
+    "tailwindcss": "4.3.3",
+    "tw-animate-css": "1.4.0"
+  },
+  "peerDependencies": {
+    "react": "19.2.8"
+  },
+  "devDependencies": {
+    "@repo/tsconfig": "workspace:*",
+    "@types/react": "19.2.18",
+    "react": "19.2.8",
+    "rimraf": "6.1.3",
+    "typescript": "7.0.2"
+  }
+}

package/templates/base/packages/ui/src/blocks/cta.tsx

@@ -0,0 +1,82 @@
+import { ArrowRightIcon } from "lucide-react";
+
+import { buttonVariants } from "@repo/ui/components/button";
+import { landing } from "@repo/ui/content/landing";
+import { interpolate } from "@repo/ui/lib/interpolate";
+import { cn } from "@repo/ui/lib/utils";
+
+// Fully static — rendered without a `client:*` directive, so it ships zero JavaScript.
+// It is also the anchor (`#cta`) every other block's call to action points at.
+//
+// Every word comes from ../content/landing.ts, and so do both destinations: these two
+// buttons leave the page, and where they go is a fact about the product rather than about
+// the layout (content shape rule 5c). Edit them there, not here.
+
+export interface CtaAction {
+  label: string;
+  href: string;
+}
+
+export interface CtaProps {
+  id?: string;
+  siteName?: string;
+  title?: string;
+  description?: string;
+  primaryAction?: CtaAction;
+  /** Pass `null` to render a single call to action. */
+  secondaryAction?: CtaAction | null;
+}
+
+// Hoisted out of the parameter list: an object literal written as a default prop is a
+// fresh object on every render, which defeats memoization downstream. Both labels and
+// both destinations still come from the content module — only the wrapper is stable.
+const DEFAULT_PRIMARY_ACTION: CtaAction = {
+  label: landing.cta.primaryActionLabel,
+  href: landing.cta.primaryActionHref,
+};
+const DEFAULT_SECONDARY_ACTION: CtaAction = {
+  label: landing.cta.secondaryActionLabel,
+  href: landing.cta.secondaryActionHref,
+};
+
+export function Cta({
+  id = "cta",
+  siteName = "Acme",
+  title = landing.cta.title,
+  description = interpolate(landing.cta.description, { siteName }),
+  primaryAction = DEFAULT_PRIMARY_ACTION,
+  secondaryAction = DEFAULT_SECONDARY_ACTION,
+}: CtaProps) {
+  return (
+    <section
+      id={id}
+      className="mx-auto w-full max-w-6xl scroll-mt-20 px-6 py-20"
+    >
+      <div className="bg-muted ring-foreground/10 flex flex-col items-center gap-6 rounded-2xl px-6 py-16 text-center ring-1">
+        <h2 className="max-w-2xl text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+          {title}
+        </h2>
+        <p className="text-muted-foreground max-w-xl text-base text-pretty">
+          {description}
+        </p>
+        <div className="mt-2 flex flex-col items-center gap-3 sm:flex-row">
+          <a
+            href={primaryAction.href}
+            className={cn(buttonVariants({ size: "lg" }))}
+          >
+            {primaryAction.label}
+            <ArrowRightIcon data-icon="inline-end" />
+          </a>
+          {secondaryAction && (
+            <a
+              href={secondaryAction.href}
+              className={cn(buttonVariants({ variant: "outline", size: "lg" }))}
+            >
+              {secondaryAction.label}
+            </a>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/base/packages/ui/src/blocks/error-state.tsx

@@ -0,0 +1,144 @@
+import { CircleAlertIcon } from "lucide-react";
+
+import { Button, buttonVariants } from "@repo/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@repo/ui/components/card";
+import { errors } from "@repo/ui/content/errors";
+import { cn } from "@repo/ui/lib/utils";
+
+// The one error screen every app in this repo renders: the web app's 404 and 500 pages,
+// the admin app's not-found screen, and the admin app's error boundary. No app writes its
+// own error markup — a second copy is a second thing to restyle when the theme moves.
+//
+// Fully static by default. No state, no effects, no `client:*` directive: an Astro page
+// renders `<ErrorState code="404" />` and ships zero JavaScript for it. The only thing
+// that can pull the browser in is a caller passing an action with `onClick` instead of
+// `href`, which is what the admin error boundary does for its retry. An .astro page must
+// never do that — Astro serializes island props, and a function does not survive the
+// crossing.
+//
+// Every word comes from ../content/errors.ts. The defaults are the not-found case, since
+// it is the one screen with no second sensible reading; the render-failure and
+// server-failure callers pass their own strings from the same module. Edit the words
+// there, not here.
+
+/** A destination. Renders as an anchor, so it costs no JavaScript. */
+export interface ErrorStateLinkAction {
+  label: string;
+  href: string;
+}
+
+/** An in-place action, such as the router's `reset`. Renders as a button, so it hydrates. */
+export interface ErrorStateButtonAction {
+  label: string;
+  onClick: () => void;
+}
+
+export type ErrorStateAction = ErrorStateLinkAction | ErrorStateButtonAction;
+
+export interface ErrorStateProps {
+  /**
+   * The status label above the title — "404", "500". Required, and deliberately not
+   * defaulted: a screen that shows the wrong number is worse than one that shows none,
+   * and every caller already knows which case it is rendering.
+   *
+   * It is a display label, not a claim about the response status. The admin not-found
+   * screen shows "404" over a soft 200, by decision.
+   */
+  code: string;
+  title?: string;
+  description?: string;
+  /** The main way out. Pass `null` to render no action at all. */
+  primaryAction?: ErrorStateAction | null;
+  /** An optional second way out, shown after the primary one. */
+  secondaryAction?: ErrorStateAction | null;
+  /** Merged onto the wrapping `<main>`, for a caller that supplies its own page frame. */
+  className?: string;
+}
+
+// Hoisted out of the parameter list: an object literal written as a default prop is a
+// fresh object on every render, which defeats memoization downstream. The label and the
+// destination still come from the content module — only the wrapper is stable.
+const DEFAULT_PRIMARY_ACTION: ErrorStateLinkAction = {
+  label: errors.notFound.homeLabel,
+  href: "/",
+};
+
+function isLinkAction(
+  action: ErrorStateAction
+): action is ErrorStateLinkAction {
+  return "href" in action;
+}
+
+export function ErrorState({
+  code,
+  title = errors.notFound.title,
+  description = errors.notFound.description,
+  primaryAction = DEFAULT_PRIMARY_ACTION,
+  secondaryAction = null,
+  className,
+}: ErrorStateProps) {
+  const actions = [primaryAction, secondaryAction].filter(
+    (action) => action !== null
+  );
+
+  return (
+    <main
+      className={cn(
+        "mx-auto flex min-h-dvh max-w-lg items-center px-6",
+        className
+      )}
+    >
+      <Card className="w-full">
+        <CardHeader>
+          <CircleAlertIcon className="text-muted-foreground size-5" />
+          <p className="text-muted-foreground font-mono text-xs tracking-widest">
+            {code}
+          </p>
+          <CardTitle className="text-lg">{title}</CardTitle>
+          <CardDescription className="text-pretty">
+            {description}
+          </CardDescription>
+        </CardHeader>
+        {actions.length > 0 && (
+          <CardContent className="flex flex-col gap-3 sm:flex-row">
+            {actions.map((action, index) => {
+              const variant = index === 0 ? "default" : "outline";
+
+              if (isLinkAction(action)) {
+                return (
+                  <a
+                    key={action.label}
+                    href={action.href}
+                    className={cn(buttonVariants({ variant }))}
+                  >
+                    {action.label}
+                  </a>
+                );
+              }
+
+              // Bound to a local first: the linter reads the JSX attribute value, and it
+              // wants a `handle*` name there rather than a bare property access.
+              const handleClick = action.onClick;
+
+              return (
+                <Button
+                  key={action.label}
+                  onClick={handleClick}
+                  variant={variant}
+                >
+                  {action.label}
+                </Button>
+              );
+            })}
+          </CardContent>
+        )}
+      </Card>
+    </main>
+  );
+}

package/templates/base/packages/ui/src/blocks/faq.tsx

@@ -0,0 +1,64 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@repo/ui/components/accordion";
+import { landing } from "@repo/ui/content/landing";
+
+// Accordion is a compound primitive: trigger and panel talk to a context the root
+// provides. Astro gives every `client:*` component its own React root, so splitting the
+// pieces across an .astro file would break that context at runtime — the whole block is
+// one island, hydrated with `client:visible` from index.astro.
+//
+// Every word comes from ../content/landing.ts. Edit the copy there, not here.
+
+export interface FaqItem {
+  /** Stable key, never the array position (see the content file). */
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export interface FaqProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  items?: FaqItem[];
+}
+
+export function Faq({
+  id = "faq",
+  title = landing.faq.title,
+  description = landing.faq.description,
+  items = landing.faq.items,
+}: FaqProps) {
+  return (
+    <section
+      id={id}
+      className="mx-auto w-full max-w-3xl scroll-mt-20 px-6 py-20"
+    >
+      <div className="text-center">
+        <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+          {title}
+        </h2>
+        <p className="text-muted-foreground mt-4 text-base text-pretty">
+          {description}
+        </p>
+      </div>
+
+      <Accordion className="mt-12">
+        {items.map((item) => (
+          <AccordionItem key={item.id}>
+            <AccordionTrigger className="text-base">
+              {item.question}
+            </AccordionTrigger>
+            <AccordionContent className="text-muted-foreground">
+              {item.answer}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </section>
+  );
+}