Saal — Tutor Marketplace React NextJs Template (AI Ready)

Saal is the other half of the education shelf: a directory of people, where most templates sell a catalogue of courses. A parent or an adult learner filters a roster, reads a profile, shortlists three, compares them side by side, picks a slot from a real availability grid and books it. From version 1.1.0 the template carries its design language in a form AI coding agents read, so the pages you add with Claude Code, Cursor or Copilot look like the nineteen you bought.

What makes it AI Ready

DESIGN.md at the project root, in the shape of Google’s DESIGN.md format. Its front matter lists every colour, type size and radius, generated from app/globals.css. Below it, twelve sections of rules: colour, light and dark, typography, spacing, icons, shapes, component states, motion, sections, drawn marks, imagery and copy.
AGENTS.md, the file Cursor, Copilot and Codex read first. It covers the stack, where the data lives, what to set before deploying and the six conventions a plausible edit breaks first.
Three agent skills in .claude/skills/. build-page adds a page or section in the house style. restyle changes the brand colour, fonts, corners, motion or opening mode in both halves. review-design checks changed files against DESIGN.md. Claude Code loads them on its own; any other agent can read them as plain files.
One source of truth. After you edit globals.css, npm run design rewrites the values in DESIGN.md, and npm run check fails if the two have drifted apart.
Tokens all the way down. Colours, the control corner radius and every animation length and curve are named tokens, so “use our blue” or “square the buttons” is a one-line edit your agent can find.

New in 1.1.0

Dark mode on every page, drawn as its own near-black palette with the four pastel tints carried across. A toggle in the header switches it on desktop and phone, and the choice is remembered. The site opens light; following the visitor’s system setting is a two-prop change.
DESIGN.md, AGENTS.md and the three agent skills described above.
A pressed state on every control: buttons, chips and pills sink while held, cards and rows darken one step.
One knob each for the corner radius and the motion speed.

Pages

Home: search panel, who teaches here, subjects, how it works, tutor results, what verified means, the lesson itself, booking, pricing, results, reviews, recruitment and FAQ.
Tutor listing: a filter rail on rate, mode, day part, level, subject, verified status, rating and language, with sort, pagination and an empty state.
Tutor profile: photo, verified badge, rating, rate, credentials, subjects and levels, a weekly availability grid, reviews and similar tutors. 24 profiles ship.
Subjects hub and subject page: every subject by faculty with counts and a starting price, then one subject sold with its level breakdown, price band, top tutors, a first lesson and an FAQ. 16 subject pages ship.
Booking flow: five steps from slot and length through plan, learner details and payment to a confirmation and a receipt, with validation at every step.
Compare: up to three tutors side by side across eleven rows, with a book action per column.
Near you: twelve metro tiles with in-person counts, a travel radius control and a pinned map.
Pricing: rate bands by level, four ways to pay, a school year costed, and where the money goes.
Trust and safety: five named checks with what each one proves, the acceptance rate, what a check does not cover, and the report path.
Become a tutor: earnings calculator, the bar, the checks, tutor voices and an application form.
Dashboard: upcoming and past lessons, saved tutors, the shortlist and an inbox.
About, Contact, Blog index, Article, Sign in, Sign up and 404.

What is built in

Dark mode on every page, with a header toggle that remembers the choice
Filter rail and sort on the listing, with the state kept in the URL
Compare table for up to three tutors
Weekly availability grid with exam-week slots marked
Five step booking flow with validation and a receipt
Four calculators: monthly cost, a school year, tutor take-home and a rate picker
Shortlist kept between visits, with a counter in the header
Metro travel radius control
Review filtering by tag, over a rating histogram
Five validated forms, each with its own success state
Currency selector, mega menus, a mobile menu and a skip link

Everything runs on demo data in lib/data/ and client state. There is nothing to configure before the first npm run dev.

Built with

Next.js 16.3.4 (App Router, Turbopack) and React 19.2.8
TypeScript 5.9, strict
Tailwind CSS v4, Base UI 1.8 and shadcn/ui primitives
next-themes for light and dark
HugeIcons and Heroicons
Plus Jakarta Sans and Geist through next/font, self-hosted at build
Responsive from 320px, keyboard accessible, AA contrast in both modes
Per-page metadata, sitemap, robots and JSON-LD

What is not included

No backend. Tutors, subjects and reviews are typed arrays in .ts files, and the forms show a success state without sending anything.
Portrait photography is not included. Every face loads at runtime from assets.lummi.ai and is licensed for the demo, not to you. Replace the portraits with your own before launch.
Scene photography is included, under the Unsplash License.
Press logos are logoipsum placeholders, and the tutors, reviews and figures are invented for the demo.