Accrue

Overview#

Accrue is a multi-page website template for an accounting firm, CPA practice or tax preparer. The demo business is Fernley Whitcomb CPAs, a fictional seven-person firm on Cherry Street in Chattanooga, Tennessee, serving households and businesses on both sides of the Georgia and Alabama state lines. This is the Next.js version: Next.js 16 (App Router), React 19, TypeScript and Tailwind CSS v4, exported as a fully static site. It is version 1.0.0 of the Next.js stack. See the template page at freeframe.dev/templates/accrue, which links to the live demo.

The template has a tax deadline calendar worked out from rules (it never goes stale), a live countdown to the next deadline, a tax-season document checklist that remembers ticks, a fee estimator, consultation booking with a rolling availability grid, and data-driven service and article pages. Every date and time is worked out in America/New_York (Eastern time), whatever the visitor's own time zone is.

Quick start#

Requirements: Node.js 24 and pnpm (corepack enable pnpm) or npm.

pnpm install
pnpm dev          # http://localhost:3000

Pages#

Project structure#

accrue/
  src/
    app/
      layout.tsx          html/body, skip link, header, footer, reveal controller, back-to-top, default metadata
      fonts.ts            Hahmlet and Geologica with next/font/local
      globals.css         Tailwind v4: @theme tokens, a few utilities and components
      icon.svg            favicon (the logo mark)
      page.tsx            home page; one folder per other route (services, service, pricing, ...)
      not-found.tsx       the 404 page
    components/
      SiteHeader.tsx      top bar with the next deadline, logo, menu, mobile menu
      SiteFooter.tsx      footer (copyright year filled in by the browser)
      DeadlineTeaser.tsx  home page next-deadline card
      DeadlinesBoard.tsx  the deadline calendar on /deadlines
      Checklist.tsx       the saved document checklist on /deadlines
      Estimator.tsx       the fee estimator on /pricing
      Booking.tsx         the consultation request on /contact
      ServicesGrid.tsx, ServiceDetail.tsx, InsightsList.tsx, ArticleView.tsx
      live.tsx            small clock-dependent texts: YearSpan, YearsSince, FirstSlot, OfficeStatus
      RevealController.tsx, BackToTop.tsx, icons.tsx
    data/site.ts          all content and settings: FIRM, SERVICES, DEADLINE_RULES, CHECKLISTS, ESTIMATOR, BOOKING, ARTICLES
    lib/
      calendar.ts         dates, Eastern "now", holidays, deadlines, booking slots, office status
      estimate.ts         the fee estimate and its URL parameters
      checklist.ts        the checklist's saved state (read, validate, save)
      client.ts           browser-only hooks: useNow(), useSearch(), replaceQuery()
      safe-storage.ts     localStorage with an in-memory fallback
      asset.ts, metadata.ts
    fonts/                Hahmlet and Geologica woff2 files with their OFL licenses
  public/img/             favicon.svg, og-image.svg/.png, services/*.svg, articles/*.svg
  next.config.ts          static export, basePath from DEMO_BASE_PATH
  package.json, tsconfig.json, eslint.config.mjs, postcss.config.mjs, pnpm-workspace.yaml
  README.md, DOCS.md, CHANGELOG.md

Pages are Server Components; everything that depends on the clock, the URL or saved data is a Client Component ("use client") that renders after the page has loaded (see Dates and the static build).

Customizing#

Brand and colors#

Design tokens live in the @theme block at the top of src/app/globals.css. The ones that matter:

To change the brand color, edit --color-olive (and --color-olive-deep for hover); pnpm dev picks it up at once:

@theme {
  --color-olive: #24506b;
  --color-olive-deep: #1a3b4f;
}

The SVG files in public/img/, the logo in src/components/icons.tsx and the inline drawings use the same hex values directly; search and replace them if you change the palette. The browser theme color is viewport.themeColor (#1f2316) in src/app/layout.tsx.

Components worth knowing in globals.css: .folder (the file-folder card with a tab, the template's motif; .folder-ink and .folder-olive variants), .mark (the marigold highlighter under a word in a headline), .display and .section-title (headline sizes), .chip (filter buttons, styled by aria-pressed), .day-btn and .slot-btn (booking grid), .receipt (zigzag edge under the estimator total), .check-row (checklist rows).

Typography#

Two fonts, self-hosted from src/fonts/ with next/font/local in src/app/fonts.ts (the same Latin files Google Fonts serves, so lines wrap exactly like the HTML version):

• Hahmlet (variable, weights 500–700) for headlines, numbers in cards and the team initials: font-serif.
• Geologica (variable, weights 300–700) for everything else: font-sans.

Each face is declared under its plain family name (declarations sets font-family), with fallback set to that name and adjustFontFallback: false, so --font-sans and --font-serif in @theme can say "Geologica" and "Hahmlet" directly. Figures use tabular, lining numerals through the num utility.

To swap a font, put its woff2 file in src/fonts/, change src, weight, the font-family declaration and fallback in fonts.ts, and the family name in @theme.

Content#

Page text is in the page files under src/app/. Everything data-driven is in src/data/site.ts:

The types (Service, DeadlineRule, Checklist, Estimator, Booking, Article) are at the top of the file. The home page's numbered service list, the pricing packages and the footer service links are written in their files; when you rename a service, update those too.

Adding a service:

// src/data/site.ts, inside SERVICES
'estate-tax': {
  name: 'Trusts & estates',
  short: 'Fiduciary returns and estate tax filings for executors and trustees.',
  from: 'From $1,200 a return',
  art: '/img/services/estate-tax.svg',
  intro: '…',
  included: ['…'], forWho: ['…'],
  timeline: [{ when: 'Month 1', step: '…' }],
  faq: [{ q: '…', a: '…' }],
  related: ['individual-tax', 'advisory']
},

Then add 'estate-tax' to SERVICE_ORDER and put the art in public/img/services/. It appears on /services, in the booking form's service menu and at /service?s=estate-tax. Article bodies are arrays of blocks: { p: '…' }, { h2: '…' }, { ul: ['…', '…'] } or { quote: '…' }. Keep ARTICLES newest first: the first one is the featured article and the fallback.

Images and artwork#

All art is SVG drawn for this template; there are no photos. Image paths in the data start at public/ (/img/...); components pass them through asset() (src/lib/asset.ts), which adds the base path when the site is served from a sub-folder.

• public/img/services/<slug>.svg: 480×300 (8:5). Replace with photos at the same ratio; cards crop with object-cover.
• public/img/articles/<name>.svg: 640×400 (8:5); the article page shows it cropped to 16:7.
• Team portraits are inline SVG in src/app/team/page.tsx (each has role="img" and an aria-label). To use photos, replace each <svg> with an <img> at 6:7 (staff) or filling the 13rem column (partners), with real alt text.
• The industry icons, hero rings, map and 404 drawing are inline SVG in their pages.
• public/img/og-image.svg is the social image source; regenerate og-image.png (1200×630) after editing it (see SEO and sharing). src/app/icon.svg is the favicon (also public/img/favicon.svg), and the same mark is the Logo component in src/components/icons.tsx.

Navigation, header and footer#

The header is src/components/SiteHeader.tsx: a dark top bar (next deadline, client portal link, phone), the logo, the main menu, the "Book a consultation" button and the mobile menu (#mobile-menu, toggled by #menu-toggle). Menu items come from the NAV array at the top of the file; each has also, the other routes that mark it as the current page (/service marks Services, /article marks Insights), using aria-current="page". To add a page, create src/app/<route>/page.tsx with export const metadata = pageMetadata(title, description) and add an entry to NAV.

The footer is src/components/SiteFooter.tsx. Its copyright year is <YearSpan fallback={2026} />: the build shows 2026 and the browser replaces it with the current Eastern year.

Features#

Dates and the static build#

The site is exported as static HTML, which can't know the visitor's date or URL. Everything that depends on the clock, the query string or saved data uses the hooks in src/lib/client.ts, built on useSyncExternalStore:

• useNow() returns the current Eastern date and time ({ key: "2026-10-30", mins: 600 }), refreshed every 30 seconds, or null while the page is prerendered and hydrating.
• useSearch() returns window.location.search, or null before hydration.

While they are null, components show the text written in the page (for example "Monday, November 2, 2026" in the countdown cards, "this week" for the first open time, 2026 for the year), so the static HTML matches the first client render and there is no hydration mismatch; the live values follow at once. The date logic itself is in src/lib/calendar.ts and never runs during the build.

Deadline calendar#

/deadlines, src/components/DeadlinesBoard.tsx, with the logic in src/lib/calendar.ts (deadlines(y), businessDay(), holidays(y)). Each entry in DEADLINE_RULES is a rule, not a date:

{ id: 'individual', short: 'Individual returns', month: 4, day: 15, rule: 'federal',
  who: ['individual'], title: 'Individual returns for {prev}, or an extension; …', forms: 'Form 1040, Form 4868' }

For every calendar year the calendar builds the date from month and day, then moves it to the next business day:

• rule: 'federal': past Saturdays, Sundays, federal holidays and DC Emancipation Day (April 16, observed on the Friday before or Monday after when it falls on a weekend). That is why, for example, April 15, 2028 (a Saturday) moves to Tuesday, April 18, 2028: Monday April 17 is the observed Emancipation Day.
• rule: 'tn': past Saturdays, Sundays, federal holidays (not Columbus Day or Emancipation Day) and Good Friday, for Tennessee franchise & excise deadlines.

{prev} and {year} in titles become the previous year and the calendar year. short is the label used in the top bar and teaser. who lists the TAXPAYER_TYPES it applies to. Moved deadlines show a note such as "Moved from Sat, Oct 31: weekend." or "Moved from Sat, Apr 15: weekend, then DC Emancipation Day on Mon, Apr 17."

holidays(y) computes, with fixed-date holidays observed on the Friday before a Saturday and the Monday after a Sunday: New Year's Day, Martin Luther King Jr. Day (third Monday of January), Washington's Birthday (third Monday of February), Good Friday (from Easter, anonymous Gregorian computus), DC Emancipation Day, Memorial Day (last Monday of May), Juneteenth, Independence Day, Labor Day, Columbus Day, Veterans Day, Thanksgiving (fourth Thursday of November), the day after Thanksgiving, Christmas Eve and Christmas Day. Which ones move deadlines is set by HOLIDAY_SETS in calendar.ts. (Inauguration Day, a DC holiday every four years on January 20, never lands on a deadline in these rules, so it isn't included.)

The calendar opens on the year of the next deadline (the current Eastern year, or the next one once December 15 has passed); the year switch shows the current and the next year. Each entry is marked Passed, Next (the first one still ahead for the chosen filter), "in N days" (red within 30 days) or "in N days". A deadline counts as ahead until midnight Eastern on its due date. The side panel lists that year's holidays.

The filter chips (data-type-filter) and year buttons (data-year-offset="0" / "1") are buttons with aria-pressed; the count line (data-dl-count) is a polite live region. Choices are written to the URL (?type=, ?year=) with history.replaceState; ?type= must be one of TAXPAYER_TYPES (own keys only), and ?year= this year or next.

Expected values at 2026-10-30T14:00Z (10:00 AM Eastern, Friday, October 30, 2026):

• Count line: "24 deadlines in 2026 · 4 still ahead".
• Next deadline (everyone): Monday, November 2, 2026, "Third-quarter payroll return", Form 941 · IRS, moved from Sat, Oct 31; countdown 3 days, 14 hours, 0 minutes.
• Then Mon, Nov 16 (extended nonprofit returns, moved from Sun, Nov 15), Tue, Dec 15 (Q4 corporate estimate and Tennessee F&E estimate).
• With ?type=individual: "6 deadlines in 2026 · 0 still ahead"; next is Friday, January 15, 2027, "Fourth-quarter estimated tax for 2026".
• In 2026, Jan 31 (Saturday) moves to Mon, Feb 2 and Mar 15 (Sunday) to Mon, Mar 16.

To turn a deadline off, delete its rule. To add a fiscal-year deadline, add a rule with its own month and day.

Countdown and next-deadline line#

Every page's top bar has [data-next-deadline] (NextDeadline in SiteHeader.tsx), showing the next deadline for everyone, for example "Next deadline Mon, Nov 2 · Form 941 (Q3) in 3 days"; before the page has loaded it is a link to the calendar. The home page card (DeadlineTeaser.tsx, [data-deadline-teaser]) shows the next deadline's date, label, detail, days and hours left, and the three after it. /deadlines has the full countdown ([data-dl-next]: days, hours, minutes until 11:59 PM Eastern on the due date, plus an sr-only sentence for screen readers; the big numbers are aria-hidden). All of them refresh every 30 seconds, except when ?now= is set.

Document checklist#

/deadlines#checklist, src/components/Checklist.tsx and src/lib/checklist.ts. Four lists from CHECKLISTS, switched with the buttons [data-checklist-tab="individual|selfemployed|business|nonprofit"] (or ?list=<id> on load). Each item is a real checkbox (visually hidden, with a drawn box) inside a <label>. The progress text ([data-check-progress], for example "1 of 11 ready") is a polite live region; the bar is decorative. "Clear this list" ([data-check-reset]) unticks the current list only. When every item is ticked, [data-check-done] appears.

Ticks are saved through safeStorage() (see Saved data), so they survive reloads; when the browser blocks storage they last for the page view. The items are in the static HTML; saved ticks appear once the page has loaded.

Fee estimator#

/pricing#estimator, src/components/Estimator.tsx with the math in src/lib/estimate.ts (estimate(inp)). Settings in ESTIMATOR:

Monthly estimate = bookkeeping tier + payroll + extra states + entity extra + annual return fee ÷ 12, rounded to the dollar. The annual line is the monthly figure × 12.

Expected values:

• Defaults: $796/month (Standard $525, payroll for 4 employees $101, tracking $40, annual returns $130), "$9,552 a year", one-time cleanup "None: your books are current".
• ?entity=nonprofit&tx=1300&emp=12&states=3&cleanup=6: $1,843/month (Full-charge over 1,000 transactions $1,340, payroll for 12 employees $173, 2 additional states $90, restricted fund tracking $100, annual returns $140), cleanup "$1,050 once, for 6 months of catch-up".
• Invalid parameters (?entity=toString&tx=abc) fall back to the defaults: $796.

Once the page has loaded, and after every change, the URL is rewritten (?entity=&tx=&emp=&states=&cleanup=), so an estimate can be shared (inputFromSearch() reads it back). The result panel is a polite live region. Reset restores defaults. On wide screens the result panel is sticky and marked data-back-to-top-hide, so the back-to-top button steps aside instead of covering it.

Consultation booking#

/contact, src/components/Booking.tsx, with the slot logic in src/lib/calendar.ts (slotsFor(), slotTaken(), bookingDays()). Settings in BOOKING:

Sundays, Saturdays outside tax season and closure days are skipped, so the grid always shows the next ten open days and never goes stale. A day whose slots are all taken is disabled ("fully booked" for screen readers). ?service=<slug> preselects a service (own-key check; ?service=not-sure selects "Not sure yet"; anything else leaves "Choose a service").

The first open time on the home and contact pages (FirstSlot in src/components/live.tsx, inside [data-first-slot]) is the earliest free slot. At 2026-10-30T14:00Z the days are Nov 2–6 and Nov 9–13, 2026; the first open time is Mon, Nov 2 at 9:00 AM, and Nov 2 has two free times (9:00 AM and 4:00 PM).

Validation (inline errors with aria-invalid): service required; a time required ("Choose a day and a time."); name at least two characters; email must look like an address; phone optional but, if given, 10 digits (or 11 starting with 1). On success the form is replaced by [data-booking-success]: "Thank you, <first name>. Your consultation request is in.", a reference FW- + five characters (a hash of name, email, date and time; for "Junie Example", "junie@example.com", Nov 2 at 9:00 AM it is FW-BJRFB), the time, service and meeting type, and what happens next. Focus moves to the success heading.

Office hours (OfficeStatus in live.tsx, inside [data-office-status]: "Open now" / "Closed now" / "Closed today for …", worked out by officeStatus() in calendar.ts): Monday–Thursday 8:30 AM–5:30 PM, Friday 8:30 AM–3:00 PM, Saturdays 9 AM–1 PM from February 1 to April 15. The table is in src/app/contact/page.tsx.

Service pages#

/service?s=<slug>, src/components/ServiceDetail.tsx. Valid slugs: individual-tax, business-tax, bookkeeping, payroll, advisory, nonprofit, irs-notices. The slug is checked with hasOwn() (an own-key check), so ?s=constructor is unknown. Missing → DEFAULT_SERVICE silently; unknown → DEFAULT_SERVICE with the notice "We couldn't find a service called "constructor", so here is our most-booked one." The page title, breadcrumb, booking link (/contact?service=<slug>) and related cards follow the chosen service. /services renders the grid with ServicesGrid, followed by a dark "Not sure which?" tile that links to /contact?service=not-sure and the estimator. The static HTML of /service shows DEFAULT_SERVICE.

Insights and articles#

/insights (InsightsList.tsx): the category chips ([data-cat-filter]) filter ARTICLES; with "All", the newest article is the large featured card and the other six are in the grid; with a category, all its articles are in the grid. The count reads "7 articles" or, for example, "2 articles in Small business". ?cat=<key> sets it on load and is kept in the URL.

/article?a=<slug> (ArticleView.tsx): unknown or missing slugs show the newest article (with a notice when a slug was given). "Keep reading" lists up to three other articles, same category first. Articles keep their real publication dates (Feb 9 to Oct 19, 2026); they are past content and never move.

Header, menu, reveal and back to top#

The header is sticky and gains a shadow after scrolling (is-scrolled). The mobile menu (below 1024px) is opened by #menu-toggle (aria-expanded, aria-controls="mobile-menu"), closes with Escape (focus returns to the button), on a link click or when the window grows. Elements with .reveal fade in as they scroll into view (src/components/RevealController.tsx; off with reduced motion; everything above the viewport edge is revealed too). The back-to-top button is src/components/BackToTop.tsx; remove it from layout.tsx (and the .back-to-top styles) to drop it.

Previewing a date#

Add ?now=YYYY-MM-DDTHH:MM (Eastern wall-clock time) to any page to see the site at that moment: the top bar, countdowns, calendar, office status, first open time, booking grid and copyright year all use it, and live refresh stops. Examples: /deadlines?now=2028-04-01T10:00&year=2028 (April 18, 2028 shift), /contact?now=2027-02-25T09:00 (tax-season Saturdays in the grid).

Forms#

The only form that collects details is the consultation request on /contact (form[data-booking] in Booking.tsx). The fee estimator is a form for layout only; it never submits. The demo form doesn't send anything until you connect it.

To connect it, for example to Formspree, make onSubmit in Booking.tsx async and post the form before showing the success panel (look for "To connect a real backend"):

const res = await fetch("https://formspree.io/f/your-id", {
  method: "POST",
  body: new FormData(form),
  headers: { Accept: "application/json" },
});
if (!res.ok) {
  // show an error message and keep the form
  return;
}
setDone({ ... }); // then show the success panel as the demo does

The form fields are service, meeting, slot_date (YYYY-MM-DD), slot_time (HH:MM, Eastern), name, email, phone, client (new or existing) and notes. Show the success state only when the service answers OK.

With a server deployment (remove output: "export", see Building and deploying) you can post to a Route Handler instead, for example src/app/api/consultation/route.ts with export async function POST(request: Request) that reads await request.formData() and passes it to your practice management system or email service, or use a Server Action. A scheduling system with real availability can replace slotTaken() in calendar.ts.

Saved data (localStorage)#

On read (readChecklist() in src/lib/checklist.ts), list must be an own key of CHECKLISTS, ticks lists that aren't arrays are ignored, and only item ids that exist in that list are kept, so stale or tampered data can't break the page. Before each change the saved value is re-read, so two open tabs don't overwrite each other's lists, and a change made in another tab shows up through the storage event.

All storage goes through safeStorage() (src/lib/safe-storage.ts): localStorage, or an in-memory stand-in when the browser blocks storage (sandboxed iframes, strict privacy settings), in which case ticks last for the page view. To reset, use "Clear this list", or remove the key in the browser's developer tools (Application → Local Storage). Nothing else is stored; the estimator keeps its state in the URL.

SEO and sharing#

• Defaults are in metadata in src/app/layout.tsx: the home page title, description, Open Graph tags (og:locale en_US), a Twitter card and the social image.
• Each page exports metadata = pageMetadata(title, description) from src/lib/metadata.ts, which keeps the social image. /service and /article also update document.title for the chosen service or article.
• metadataBase is process.env.NEXT_PUBLIC_SITE_URL (falling back to https://fernleywhitcomb.example). Set it when you build so the social image URL is absolute:

NEXT_PUBLIC_SITE_URL=https://www.yourfirm.com pnpm build

• After editing public/img/og-image.svg, regenerate og-image.png (1200×630) with any SVG-to-PNG tool, keeping the Hahmlet and Geologica fonts available so the text renders.

Suggestions: add src/app/sitemap.ts and src/app/robots.ts (both work with static export); give each service and article its own static route if search traffic to them matters (the ?s= and ?a= pages share one route); add AccountingService structured data (JSON-LD) with your real address and hours.

Accessibility#

• Skip link, landmarks (header, nav with labels, main, footer), one <h1> per page and a logical heading order.
• Visible focus outlines (olive on light, marigold on dark).
• Filter chips, year switch, checklist tabs and booking days and times are buttons with aria-pressed; booked times are disabled and announced as "booked".
• Live regions: deadline count, checklist progress, estimator result and the chosen booking time.
• The countdown digits are aria-hidden with an sr-only sentence instead, so screen readers aren't flooded.
• Form fields have labels, aria-describedby error messages and aria-invalid; focus moves to the first problem.
• Reveal animations, smooth scrolling and back-to-top scrolling respect prefers-reduced-motion.
• Text colors meet WCAG AA: use text-muted (not lighter) for secondary text on paper, and never put marigold text on a light background.

When editing: keep one h1 per page, label every new input, and keep aria-controls/aria-labelledby ids in step.

Building and deploying#

pnpm build writes a static site to out/ (output: "export" in next.config.ts):

• Vercel: import the repository; no settings needed.
• Netlify / Cloudflare Pages: build command pnpm build, publish directory out.
• Any static host: upload the contents of out/.

To serve from a sub-folder, build with DEMO_BASE_PATH=/firm pnpm build; next.config.ts passes it to basePath and NEXT_PUBLIC_BASE_PATH, which asset() uses. pnpm build:demo does this for the freeframe.dev demo (demo/, which you can delete).

Tailwind scans the source files for class names; keep each class name whole (not built from pieces such as `bg-${color}`), or it won't be generated.

To use server features (Route Handlers, Server Actions), remove output: "export" and images.unoptimized from next.config.ts and deploy to a Node-capable host such as Vercel.

TypeScript setup#

package.json installs @typescript/native (TypeScript 7, which provides tsc) and typescript as an alias of @typescript/typescript6, because typescript-eslint and parts of the Next.js toolchain still need the TypeScript 6 API. When typescript-eslint supports TypeScript 7, replace both with typescript@7. eslint.config.mjs pins settings.react.version, because eslint-plugin-react can't detect it under ESLint 10, and turns off @next/next/no-img-element, because a static export serves plain <img> tags.

Troubleshooting#

• The calendar shows the wrong year or "Passed" everywhere. The page uses the visitor's clock in Eastern time. Check for a leftover ?now= in the URL; it freezes the date.
• A deadline is on a different date than the IRS announced. Disaster relief and one-off IRS notices can postpone deadlines for some areas. Those aren't rules; add a note to the page or temporarily change the rule's month and day.
• The page briefly shows "Monday, November 2, 2026" or "this week". That is the text written for the static build; it is replaced as soon as the page loads. If it stays, check the browser console for a JavaScript error.
• Checklist ticks disappear after a reload. The browser is blocking storage (private mode, a sandboxed preview, strict privacy settings); ticks then last for the page view only.
• Images or the favicon are missing when the site lives in a sub-folder. Build with DEMO_BASE_PATH set to the folder, and pass new image paths through asset().
• The booking grid always starts tomorrow. That is intentional (bookingDays() starts at tomorrow). To allow same-day bookings, start the loop at now.key and skip times already past.
• The office closes on a day the grid still offers. Add the holiday id to BOOKING.closures, or for a one-off closure add a check for that date in slotsFor().
• A link like /service?s=Payroll shows the fallback. Slugs are lowercase and exact: ?s=payroll.

License#

Freeframe Commercial License: use it in unlimited websites and apps for yourself and your clients; it may not be resold or redistributed as a template. The full terms, with your licensee details, are in LICENSE.txt and at https://freeframe.dev/license#commercial. Third-party components keep their own licenses. Fonts: Hahmlet and Geologica are licensed under the SIL Open Font License (see src/fonts/Hahmlet-OFL.txt and src/fonts/Geologica-OFL.txt). Fernley Whitcomb CPAs, its people, clients, testimonials, phone number and email address are fictional placeholders.