Slatework

Overview#

Slatework is a multi-page marketing website for a recruiting software company: an applicant tracking system (ATS) for companies with 50 to 1,000 employees. The fictional Slatework, Inc. is based in Lexington, Kentucky, and works in Eastern time. This is the Nuxt version: Nuxt 4, Vue 3 single-file components, TypeScript and Tailwind CSS v4, generated as a fully static site. It has the same pages, design and interactions as the HTML version. This guide covers version 1.0.0. The template page, with a link to the live demo, is at freeframe.dev/templates/slatework.

The look is corporate and structured: white paper with hairline grids, a deep indigo brand color, a marigold highlight, Hubot Sans headings and Fira Sans body text, with a full dark theme.

Quick start#

1. Unzip the download and open a terminal in the folder.

2. Install and start the development server:

   shCopy

   pnpm install
   pnpm dev

3. Visit http://localhost:3000. Edit files in app/ and the page reloads.

Requirements: Node.js 24 and pnpm. pnpm install also runs nuxt prepare, which writes the types and the ESLint config to .nuxt/. The fonts are bundled, so nothing loads from the internet.

Pages#

Project structure#

slatework/
  app/
    app.vue                 <NuxtLayout><NuxtPage /></NuxtLayout>, pages keyed by path and query
    error.vue               404 page
    router.options.ts       writes query strings the way the HTML version does
    layouts/default.vue     skip link, header, page, footer, live region (#live-region)
    pages/                  one file per page (index, product, pricing, customers, integrations, security, resources, demo)
    components/
      SiteHeader.vue        header, main menu, phone menu, header shadow on scroll
      ThemeToggle.vue       light/dark switch
      SiteFooter.vue        footer columns, contact details, copyright year
      LogoMark.vue, ArrowIcon.vue   the logo mark and the arrow icon
      PipelineBoard.vue     hero pipeline board (drag and drop, Move menu, stats)
      InterviewScorecard.vue   weighted interview scorecard (home and product)
      JobBoards.vue         product step 01: job boards and posting preview
      PanelScheduler.vue    product step 04: panel scheduler
      OfferCheck.vue        product step 05: offer pay band check
      CaseCard.vue          one customer story with its chart
      IntMark.vue           an integration's drawn mark
    composables/
      useNow.ts             the page's clock: now, today in Eastern time, the visitor's zone
      useFormValidation.ts  form validation and success panels
      usePageSeo.ts         per-page title, description, canonical and Open Graph tags
      useCurrentPage.ts     aria-current for menu links
    data/
      site.ts               content and settings: candidates, plans, customers, integrations, posts...
      nav.ts                main menu items
    utils/
      pipeline.ts           board state, saved-state cleaning, counts, funnel, time to hire
      schedule.ts           free/busy intersection and slot proposals
      webinars.ts           the rolling webinar dates
      time.ts               Eastern "today", time zone math, business days, ?now= preview
      format.ts             money, plurals, initials, reference codes
      safeStorage.ts        localStorage with an in-memory fallback, storage keys (KEYS)
      url.ts                reading and writing URL parameters
      announce.ts           screen reader announcements
    plugins/
      reveal.client.ts      scroll reveal animation
      same-page.client.ts   links to the page already showing start it afresh, like a page load
      stable-build.server.ts   reproducible builds
    assets/css/main.css     Tailwind import, fonts, color tokens (light and dark), component classes
    assets/fonts/           Hubot Sans and Fira Sans (Latin woff2) with their OFL license texts
  public/img/               favicon.svg, og-image.png (social image), og-image.svg (its source)
  nuxt.config.ts            base path, head defaults, theme script, SITE_URL, prerendered routes, Tailwind
  eslint.config.mjs, tsconfig.json, pnpm-workspace.yaml
  package.json, README.md, DOCS.md, CHANGELOG.md

Customizing#

Brand and colors#

Colors are CSS variables in app/assets/css/main.css: :root holds the light theme and .dark the dark theme. @theme inline maps them to Tailwind names, so bg-brand, text-ink-soft or border-line follow the theme.

Fixed colors that don't change with the theme (the night band, marigold) are in the @theme block.

To change the brand color, edit both themes:

:root {
  --brand: #0f6b5c;
  --brand-strong: #0b5649;
  --brand-soft: #e3f3ef;
  --brand-line: #b9e0d6;
}
.dark {
  --brand: #7fd6c3;
  --brand-strong: #a6e5d7;
  --brand-soft: #12302a;
  --brand-line: #24584d;
}

The logo mark (app/components/LogoMark.vue), public/img/favicon.svg, public/img/og-image.svg and the integrations page hero art use #3a3fd0 directly; change them too. theme-color is set in nuxt.config.ts.

Typography#

Headings use Hubot Sans (variable width, set wider with font-stretch: 112%) and body text Fira Sans. Both are self-hosted: the @font-face rules at the top of app/assets/css/main.css load the Latin woff2 files in app/assets/fonts/ under their real family names, and the @theme block sets them as --font-display and --font-sans:

@font-face {
  font-family: "Hubot Sans";
  font-style: normal;
  font-weight: 500 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("../fonts/HubotSans-latin.woff2") format("woff2");
}

To swap a font, put its woff2 files in app/assets/fonts/, change the @font-face rules and the family name in --font-display or --font-sans. Hubot Sans draws its zero with a bar; that is the font's design.

Content#

Page text is in the page files (app/pages/*.vue) and the components. Everything interactive reads from app/data/site.ts. The main structures:

Example: add an integration to INTEGRATIONS. Give it a unique id, an existing category, a tile color and a small mark drawn in white inside a 40×40 box:

{ id: "shiftnote", name: "Shiftnote", category: "messaging", bg: "#0f766e", setup: "2 minutes", direction: "One-way",
  blurb: "Post interview reminders to the hiring team channel.",
  syncs: ["Interview reminders", "Scorecard due alerts"],
  mark: '<circle cx="20" cy="20" r="9" fill="#fff"/>' },

Category counts, search and the detail dialog pick it up automatically. Update the count in the page's description (usePageSeo in app/pages/integrations.vue) if you want it exact.

Example: add a customer story to CASES with industry set to a key of INDUSTRIES and size to s, m or l. metrics[0] draws the before-and-after chart. The home page logo row and testimonials are written into app/pages/index.vue; edit them there by hand if you change customers.

mark strings are trusted SVG markup rendered with v-html (CaseCard.vue, IntMark.vue); only put your own drawings there, never text that visitors can enter.

Images and artwork#

All artwork is inline SVG drawn for this template: feature pillar icons, report charts, the security and 404 illustrations, and the integration and customer marks (in app/data/site.ts, as mark strings). There are no photos. If you add photos, keep the existing aspect ratios: avatars are square, case study marks 40×40. Files in public/ need the base path when you link them from a template: :src="`${$config.app.baseURL}img/photo.jpg`".

The social image is public/img/og-image.png (1200×630), rendered from og-image.svg. After editing the SVG, regenerate the PNG with any SVG renderer. The favicon is public/img/favicon.svg.

Navigation, header and footer#

The main menu is NAV in app/data/nav.ts; app/components/SiteHeader.vue renders it in the desktop menu and the phone menu, and marks the current page with aria-current="page" (useCurrentPage()). The footer columns are in app/components/SiteFooter.vue. To add a page, create app/pages/<route>.vue with a <main id="main"> and a usePageSeo({ title, description, page }) call, add the route to routes in nuxt.config.ts (so it is prerendered), then add it to NAV and the footer. Internal links are <NuxtLink to="/pricing">, which adds the base path.

Dark mode#

The theme button (app/components/ThemeToggle.vue) toggles the dark class on <html> and saves the choice as slatework:theme. A short script in app.head.script in nuxt.config.ts applies the saved choice, or the visitor's system setting, before the page paints. To make light the default regardless of the system setting, remove the matchMedia(...) check from that script. To remove dark mode, delete <ThemeToggle /> from the header and the theme part of the script; the .dark variables can stay.

Features#

Dates and the static build#

The generated pages can't know the visitor's date, time zone, URL parameters or saved choices, so everything that depends on them is filled in once the page is mounted: components read window.location, Date and localStorage in onMounted() or in event handlers, never while rendering. The generated HTML shows the written defaults (for example the retention dates for November 9, 2026), and the real values follow without a hydration mismatch. useNow() in app/composables/useNow.ts gives the page's clock (null until mounted).

Hero pipeline board#

app/components/PipelineBoard.vue with the logic in app/utils/pipeline.ts. The board shows the requisition REQ with five columns from STAGES. Each column's count is STAGE_BASE[stage] plus the cards in it.

• Drag and drop: with a mouse or pen, drag a card anywhere; on touch screens, drag by the card's initials (data-grip), so swiping the board still scrolls it. The board scrolls sideways when you drag near its edge. Escape cancels a drag.
• Keyboard and screen readers: each card has a "Move" button (data-move) that opens a menu of stages (role="menu"; arrow keys, Home, End, Escape, Tab closes it). Choosing a stage moves the card, returns focus to its Move button and announces the new count and time to hire.
• Funnel: "reached" counts each stage plus every later stage. With the starting data: Applied 61, Screen 19, Interview 7, Offer 2, Hired 1, so Applied to Hired is 1.6%.
• Projected time to hire: the average of age + STAGE_REMAINING[stage] over cards in Offer and Hired, rounded. Start: Keziah W. (27 + 0) and Esmeralda P. (19 + 4) give 25 days, "5 days under the 30-day target". Moving Ramona D. (age 16) to Offer makes Offer 2 and time to hire 23 days. Then dragging Esmeralda P. to Hired makes Hired 2, "2 of 2 openings filled" and time to hire 22 days.
• Moves are saved (slatework:pipeline); "Reset board" restores the starting data. Moved cards go to the top of their new column.

Interview scorecard#

app/components/InterviewScorecard.vue, on the home page (<InterviewScorecard compact />, without the interview prompts and the Reset button) and the product page. Each competency in COMPETENCIES has 1–4 rating buttons (role="radio", arrow keys change the rating). The weighted score is sum(weight × rating) / 100. The defaults (4, 3, 3, 2, 4 with weights 30, 25, 20, 15, 10) give 3.25, Hire. Rating Product knowledge 4 gives 3.55, Strong hire; then rating Customer empathy 1 gives 2.65, No hire. Thresholds in RECOMMENDATIONS: 3.5 Strong hire, 2.75 Hire, 2.0 No hire, below that Strong no hire.

Job boards and posting preview#

app/components/JobBoards.vue (/product#sourcing). Checking boards updates the board count, the 30-day cost and typical applicants. Default: careers page, Hirewire and Openroles, 3 boards, $0, 60 applicants; adding Talentcast makes $179, 76. The posting preview follows the title, location and pay range fields, and flags a maximum below the minimum.

Panel scheduler#

app/components/PanelScheduler.vue with the search in app/utils/schedule.ts (/product#scheduling). For each of the next SCHEDULE_DAYS (5) weekdays after today in Eastern time, it intersects every chosen interviewer's working hours (WORK_HOURS, 9:00 a.m. to 5:00 p.m. in their own zone) minus their busy blocks, then proposes up to SCHEDULE_PROPOSALS (3) non-overlapping slots on 30-minute steps, at most two per day. Busy blocks are tied to business day numbers (0 = the first weekday after today), so the demo never runs out of dates. Times are shown in the visitor's zone by default; "Show times in" switches between US zones, and each slot lists every interviewer's local time.

With the default panel (Estelle, Renzo, Vittorio), 60 minutes, on Monday, November 9, 2026, the slots in Eastern time are Tue, Nov 10, 12:30–1:30 PM; Wed, Nov 11, 3:00–4:00 PM; and Wed, Nov 11, 4:00–5:00 PM. Adding Ursula gives Wed 3:00 PM, Wed 4:00 PM and Thu, Nov 12, 1:00 PM.

Offer pay band check#

app/components/OfferCheck.vue (/product#offers). The slider runs from OFFER_BAND.sliderMin to sliderMax. Inside the band ($68,000–$84,000) only the hiring manager approves ($76,000: "Inside band", 1 approver); below it the people team is added ($64,000: "Below band", 2); above it the VP and Finance are added ($88,000: "Above band", 3). The rules are OFFER_BAND.rules.

Pricing and calculator#

app/pages/pricing.vue holds one state shared by the billing switches, plan prices and the calculator. Monthly prices per employee are in PLANS (Essentials $5, Growth $8); yearly billing takes ANNUAL_DISCOUNT (20%) off: $4 and $6.40. Companies under MIN_EMPLOYEES (50) are billed as 50. The calculator shows the monthly cost, the yearly cost and the cost per hire.

The choice is saved (slatework:pricing). URL parameters override it: ?billing=monthly|annual, ?plan=essentials|growth, ?employees=1–1000, ?hires=1–2000. The "Book a demo with this estimate" link passes plan and employees to /demo.

Customer stories#

app/pages/customers.vue with each card in app/components/CaseCard.vue. Industry buttons and a company size select filter CASES; the URL keeps them as ?industry= (a key of INDUSTRIES) and ?size=s|m|l. Financial services shows 2 of 8; with 201–500 employees, 1 (Pellworth); 501–1,000 employees alone shows 4.

Integrations directory#

app/pages/integrations.vue. Search matches name, description and category; category buttons show counts (HRIS and payroll 4, Calendars and video 4, Job boards 6, Background checks 2, Assessments 2, E-signature 2, Messaging 2). The URL keeps ?category= and ?q=. Each card opens a native <dialog> with what syncs; Escape, Close or a click outside the box closes it and returns focus to the card.

Data retention example#

app/pages/security.vue (/security#retention). Choosing 12, 24 or 36 months (RETENTION) shows the date a candidate rejected today would be anonymized, and the reminder date a month earlier, worked out from today in Eastern time. On November 9, 2026, 24 months gives Thursday, November 9, 2028 with a reminder on Oct 9, 2028.

Webinars and articles#

app/pages/resources.vue, with the dates from app/utils/webinars.ts. Webinars follow a rule: the second Thursday of each month at 1:00 p.m. Eastern (WEBINAR_TIME), the next WEBINAR_COUNT (3) at least WEBINAR_MIN_DAYS (3) days away; on November 9, 2026 that is Nov 12, Dec 10 and Jan 14. The topic cycles through WEBINAR_TOPICS by month. Times also show in the visitor's zone. Articles in POSTS keep their real dates and can be filtered by topic (?topic=); each expands in place.

Menu, header and motion#

The phone menu button (#menu-toggle) opens #mobile-menu (aria-expanded; Escape closes it and returns focus to the button, and it closes when the window grows to desktop width). The header gets a shadow once the page scrolls. Sections with reveal fade in once as they scroll into view (app/plugins/reveal.client.ts); with reduced motion they show immediately, and the card animation is turned off.

Links are client-side navigations. A link to the page already showing (the Pricing menu item on a pricing page with ?billing=monthly, for example) starts that page afresh at the top, like a page load in the HTML version (app/plugins/same-page.client.ts and the page key in app/app.vue).

Keeping the demo current#

Nothing dated goes stale. All "upcoming" dates are computed from today in Eastern time (COMPANY.timeZone):

Articles keep their fixed past dates. For reviews and screenshots, ?now=YYYY-MM-DDTHH:MM (read as Eastern time) pretends it is another moment; turn it off with ALLOW_NOW_PARAM = false at the top of app/utils/time.ts.

Forms#

All forms validate in the browser with inline messages linked by aria-describedby and aria-invalid on the field, focus the first problem and then show a success panel. The helper is useFormValidation in app/composables/useFormValidation.ts. No form sends anything until you connect it.

/demo also reads ?plan=essentials|growth|enterprise&employees= to preselect the plan and company size, and ?topic=security to tick "Security and reporting".

To connect a form service such as Formspree, send the request in the submit listener in app/composables/useFormValidation.ts (where it calls onSuccess) and show the success panel only when the service answers OK:

root.addEventListener("submit", async (e) => {
  // ...the checks above, unchanged...
  const response = await fetch("https://formspree.io/f/your-id", {
    method: "POST",
    body: new FormData(root),
    headers: { Accept: "application/json" },
  });
  if (!response.ok) return; // keep the form; show your own error message here
  onSuccess(new FormData(root));
  sent.value = true;
});

With pnpm build (a Node.js server build) you can post to a server route instead: add server/api/demo.post.ts with export default defineEventHandler(async (event) => { const body = await readFormData(event); ... }) and pass the data to your CRM or email service.

Saved data (localStorage)#

All storage goes through safeStorage in app/utils/safeStorage.ts, which falls back to memory when the browser blocks localStorage, so the page keeps working for the visit. The keys are in KEYS in the same file.

Clear them with "Reset board", or from the browser's developer tools (Application → Local Storage).

SEO and sharing#

Each page sets its title, description and Open Graph tags with usePageSeo() from app/composables/usePageSeo.ts, which also adds a canonical link. URLs are absolute: set SITE_URL to your domain when you build (SITE_URL=https://www.example.com pnpm generate), so og:image (/img/og-image.png) and the canonical links point at your site, which most social sites require. The 404 page is marked noindex. Add a public/robots.txt and a sitemap (by hand, or with a module such as @nuxtjs/sitemap) if you want them.

Accessibility#

• Skip link, landmarks, one <h1> per page and aria-current="page" in the menus.
• Visible focus outlines, AA contrast in both themes, and reduced motion respected.
• The pipeline board has a full keyboard path (Move menu) and announces changes in a live region (#live-region in the layout, written by announce() in app/utils/announce.ts).
• Scorecard ratings are radio groups; filters use aria-pressed; the integration dialog is a native <dialog>.
• Keep one h1 per page, label new inputs, and keep the Move menu if you change the board.

Building and deploying#

pnpm generate writes a static site to .output/public/, with every route listed in routes in nuxt.config.ts prerendered to <route>.html (pricing.html, served at /pricing) and the 404 page to 404.html:

• Netlify / Cloudflare Pages / Vercel: build command pnpm generate, publish directory .output/public.
• Any static host: upload the contents of .output/public/. The host should serve /pricing from pricing.html (most do) and 404.html for unknown paths.

To serve from a sub-folder, build with DEMO_BASE_PATH=/hiring pnpm generate; nuxt.config.ts turns it into app.baseURL, which every link, script and 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. The components use small lookup objects (BAR, TONE) for that.

TypeScript setup#

typescript is installed as an alias of @typescript/typescript6, the TypeScript 6 API that vue-tsc needs. tsconfig.json only references the configs Nuxt writes to .nuxt/, so run pnpm install (or nuxt prepare) before pnpm typecheck or pnpm lint.

Troubleshooting#

• New classes have no effect: class names built from pieces aren't generated; write them out in full.
• The board keeps an old arrangement: it's saved in slatework:pipeline; click "Reset board".
• Scheduler shows no slots: the panel has no shared time in the next five weekdays. Check busy blocks and WORK_HOURS in app/data/site.ts, or pick a shorter interview.
• Dates look a day off: dates are computed in Eastern time. Change COMPANY.timeZone in app/data/site.ts for another home zone.
• A new page shows the 404 page after pnpm generate: add its route to routes in nuxt.config.ts.
• Saved choices don't persist in a preview frame: some sandboxed frames block storage; the site then keeps state in memory for the visit only.
• A hydration warning after editing a component: values that depend on the clock, the URL or storage must be read in onMounted() (or come from useNow()), not while the component renders.
• pnpm lint can't find .nuxt/eslint.config.mjs: run pnpm install or pnpm typecheck first.

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. Hubot Sans and Fira Sans are included under the SIL Open Font License (see app/assets/fonts/). Slatework, its customers, integrations, interviewers and people are fictional.