Fitness · Next.js
Kelvaro
A dark, high-energy gym website that knows when the club is open and what's on next, and turns every visit into a call, a DM or a route.
Loading the collection
Preparing the details…SaaS · B2B SaaS
A recruitment software website and ATS & client portal UI where one candidate record moves from a job-board application through the pipeline and the recruiter's shortlist case to the client's decision and a panel-checked interview slot.
Premium gallery
10 verified previews built from the real template UI and release assets.









The product
LIVE DEMO: https://shortlyn-saas.poyrazn8n.workers.dev
A recruitment software website and ATS & client portal UI where one candidate record moves from a job-board application through the pipeline and the recruiter's shortlist case to the client's decision and a panel-checked interview slot. Shortlyn · website-template · Next.js source code 16 page designs · 32 demo pages + custom 404 Static Next.js frontend template with fictional content: no accounts or access control, database, email, calendar, CV parsing, AI, payments or back end; demo changes stay in the visitor's browser and the demo form needs an endpoint you configure.
- Teams building recruitment, applicant-tracking or search-firm software who need a credible marketing site and the core screens in one codebase - Frontend developers integrating a candidate pipeline, client shortlist review and interview planning UI into an existing recruitment product - Agencies building sites and portals for boutique recruitment and executive search firms Required skills: Comfortable editing TypeScript configuration and content files in a Next.js project. Not ideal for: Buyers who need a working ATS without development: accounts, sign-in, a database, email, calendars, CV parsing or job-board posting; Teams looking for an HR, payroll or employee-management dashboard rather than recruiting software.
16 page designs · 32 demo pages + custom 404 - shortlyn/ - shortlyn/package.json - shortlyn/package-lock.json - shortlyn/README.md - shortlyn/START-HERE.md - shortlyn/BUYER-README.md - shortlyn/BUYER-SCOPE.md - shortlyn/CHANGELOG.md - shortlyn/LICENSE.txt - shortlyn/ASSET-CREDITS.md - shortlyn/Documentation/ - Relay record hero: The home hero follows one fictional candidate record through four hand-offs — application, the recruiter's case and scores, the client's decision, the booked panel interview — as ARIA tabs with arrow, Home and End keys, rendered from the same sample data as the workspace. [frontend-demo] - Job board with search, filters and sort: Published roles from content/jobs.ts with text search, workplace and area filters and sorting; every choice lives in the URL and survives reload and Back; an empty state offers to clear filters. Confidential searches stay off the board and their URL returns the custom not-found page. Each role page carries JobPosting structured data. [included-working] - Three-step demo application: Details, the role's questions and a review step, validated with inline errors and a focused error summary. Submitting creates a candidate record in the browser's demo workspace (nothing is sent) and links to it in the recruiter view. No CV upload: the form says that needs a back end and consent flow. [browser-local-demo] - Pipeline board and table: Seven stages as columns with counts and hints; cards move by dragging them to another column, by a stage menu on every card or with Alt + arrow keys, with a spoken announcement; on phones one stage is shown at a time behind stage buttons. Search and role filters, archived stages on request, an empty state, and a table view sortable by candidate, search, stage, time in stage and score with aria-sort. Moves are kept in the browser. [browser-local-demo] - Candidate record: The recruiter's case for the client (validated, saved), a four-criterion scorecard, stage changes and Add to shortlist, the client's feedback, the booked interview, application answers, contact details marked as hidden from the client, history and other searches. Unknown records show a not-found state. [browser-local-demo] - Search workspace and shortlist sending: Per role: stage counts linked to the filtered pipeline, the shortlist to send (a candidate without a written case cannot be sent), sending selected candidates to the client portal, the client's decisions so far, and the brief with criteria averages and the interview panel. [browser-local-demo] - Client portal shortlist: The shortlist for one client's roles: only candidates shared with that client, each with the consultant's case and overall score, awaiting decisions first, an awaiting/all filter and an empty state. Contact details are never shown. The 'Viewing as' select is a demo switch, not sign-in or access control. [browser-local-demo] - Structured client decision: A rating per criterion, one of three decisions and an optional note; declining requires a reason. Meet this candidate moves the record to Interview and into the interview plan; Hold keeps it in review; Not for this role archives it. Candidates not shared with the client cannot be reviewed. [browser-local-demo] - Interview plan with panel conflicts: Candidates the client asked to meet, with slots over the next six working days offered only where every panelist is free; busy slots state the reason (a calendar block or another booked interview). Booking adds the interview to a day-by-day agenda; reschedule and release are supported. No invitation is sent. [browser-local-demo] - Recruiter overview: Figures counted from the workspace (in progress, awaiting a client verdict with overdue count, interviews to book and booked, placed), a needs-attention list with direct actions, recent activity including the visitor's own changes, and every search with its stage mix. [browser-local-demo] - Reset demo and storage notices: A two-step Reset demo restores the sample data and clears the stored copy. When the browser blocks storage the demo runs in memory and says so; unreadable stored data is replaced by the sample data with a notice. [browser-local-demo] - Pricing estimator: From recruiter and client-reviewer counts and yearly or monthly billing it prices every plan in config/pricing.ts with seat minimums and reviewer allowances, explains why a plan does not fit, recommends the cheapest that does and carries the plan to the demo form. Inputs live in the URL. [included-working] - Full-screen menus: The marketing menu and the workspace menu cover the screen, keep focus inside (including in Safari, where Tab skips links by default), lock page scroll, close with Escape, the close button or after navigating, and return focus to the menu button. [included-working] - SEO and structured data: Every page has its own title, description, canonical URL and Open Graph and Twitter image; sitemap, robots and web manifest are generated; JSON-LD covers Organization, WebSite, SoftwareApplication with one Offer per priced plan, FAQPage on pricing, EmploymentAgency, JobPosting and BreadcrumbList on the job board. Demo screens and application forms are noindex and kept out of the sitemap. [included-working] - Responsive layout: Every page adapts from 1440 to 360 CSS px without page overflow, colliding boxes or phone touch targets under 24 px; the board and wide tables scroll inside their own containers; checked in Chromium and WebKit. [included-working] - Motion with a reduced-motion branch: Section reveals, the relay panel change and the moved-card highlight are CSS only; under prefers-reduced-motion everything is shown in place without movement. [included-working] - Fonts bundled with the template: Spectral and Commissioner (SIL OFL 1.1) are served from app/fonts/ with next/font/local, so the build needs no network access. [included-working]
- Job board with search, filters and sort: Published roles from content/jobs.ts with text search, workplace and area filters and sorting; every choice lives in the URL and survives reload and Back; an empty state offers to clear filters. Confidential searches stay off the board and their URL returns the custom not-found page. Each role page carries JobPosting structured data. [included-working] - Pricing estimator: From recruiter and client-reviewer counts and yearly or monthly billing it prices every plan in config/pricing.ts with seat minimums and reviewer allowances, explains why a plan does not fit, recommends the cheapest that does and carries the plan to the demo form. Inputs live in the URL. [included-working] - Full-screen menus: The marketing menu and the workspace menu cover the screen, keep focus inside (including in Safari, where Tab skips links by default), lock page scroll, close with Escape, the close button or after navigating, and return focus to the menu button. [included-working] - SEO and structured data: Every page has its own title, description, canonical URL and Open Graph and Twitter image; sitemap, robots and web manifest are generated; JSON-LD covers Organization, WebSite, SoftwareApplication with one Offer per priced plan, FAQPage on pricing, EmploymentAgency, JobPosting and BreadcrumbList on the job board. Demo screens and application forms are noindex and kept out of the sitemap. [included-working] - Responsive layout: Every page adapts from 1440 to 360 CSS px without page overflow, colliding boxes or phone touch targets under 24 px; the board and wide tables scroll inside their own containers; checked in Chromium and WebKit. [included-working] - Motion with a reduced-motion branch: Section reveals, the relay panel change and the moved-card highlight are CSS only; under prefers-reduced-motion everything is shown in place without movement. [included-working] - Fonts bundled with the template: Spectral and Commissioner (SIL OFL 1.1) are served from app/fonts/ with next/font/local, so the build needs no network access. [included-working]
- payments: No payments or subscriptions; plans and seat prices are content in config/pricing.ts. [not-included] - auth: No accounts, sign-in or access control; the demo's view switch and client select are navigation only. [not-included] - email: The demo request form POSTs JSON to the endpoint you set in NEXT_PUBLIC_DEMO_FORM_ENDPOINT; nothing is sent without it. Shortlist, decision and interview notifications are not included. [integration-required] - cms: Content is TypeScript data in config/ and content/; no CMS is connected. [not-included] - booking: The interview plan books slots in the browser demo only; no calendar is read or written and no invitation is sent. [not-included] - orders: No order handling. [not-included] - backend: No back end, database or API; lib/demo-store.ts keeps demo changes in localStorage and is the place to connect your own API. [not-included] - mlsCrm: No CRM, ATS or job-board connection. [not-included]
- Shortlyn, Harrow & Vale Search and every client, candidate, role and figure are fictional sample content; the security page's policy text is a sample and must be reviewed before launch. - No accounts, sign-in or access control, database, back end, email, calendar, job-board posting, CV parsing, AI or payments: the job board, pipeline, candidate records, client portal and interview plan run in the browser on the sample data, and demo changes stay in localStorage until Reset demo. - The demo form sends nothing until NEXT_PUBLIC_DEMO_FORM_ENDPOINT is set; the footer and workspace notices stay on until they are set to null in config/brand.ts. - English demo content only; multilingual UI and RTL have not been validated.
- Install with npm ci and run npm run dev. - Set the name, tagline, URL, emails, demo notices and navigation in config/brand.ts. - Change the colour tokens in app/globals.css and the fonts in app/fonts.ts; replace the logo in components/Logo.tsx and the icons. - Set plans and seat prices in config/pricing.ts, stages and rules in config/pipeline.ts and policies in config/trust.ts. - Replace the sample firm, roles, candidates and records in content/ (Documentation/CUSTOMIZATION.md explains each file). - Replace the functions in lib/demo-store.ts with calls to your own API when connecting a back end; then run npm run build and deploy out/ (Documentation/DEPLOYMENT.md).
- shortlyn-v1.0.0.zip · version 1.0.0 Node.js 20.9 or newer; internet access for dependency installation. Open shortlyn. Install: npm ci Build: npm run build Lockfile: package-lock.json. Package manager: npm.
LICENSE — Webloomery Template License v1.0 (effective 26 September 2026) - One purchase, one end product: build one website or application for yourself or for one client. - Modify the source for that end product. Its development, staging and production copies count as one end product. - Team members and contractors on that end product may use the files, only for it. - You may hand the finished project and the customized source it needs to that one client; the Template is then not reused for anyone else. - Each additional website, application, end product or client needs another purchase. - Not allowed: reselling, sharing, sublicensing or publicly publishing the Template source; turning it into a template, builder, code generator or reusable client-production system; reselling its components or assets separately. - Third-party fonts, photographs and other assets keep their own licenses, listed in ASSET-CREDITS.md. - Support and updates are separate from the license. The full license text is included as LICENSE.txt in the download and published at https://webloomery.com/legal/license.
- Installing and building the delivered package - Questions about the documented configuration and content files Excluded: Custom development and design changes; Building a back end, accounts, access control or recruiting integrations; Connecting forms, email, calendars, job boards or analytics; Legal review of the policy and security text. No guaranteed response time. No fixed support period is promised.
No stock photography or generated imagery. Original logo, favicon, app icons, inline SVG interface icons and a social image captured from the template's own home hero. Spectral and Commissioner fonts bundled under the SIL Open Font License 1.1 with their licence texts, listed in ASSET-CREDITS.md. Software and fonts retain their own licenses. Read ASSET-CREDITS.md. Third-party materials retain their own licenses. Demo brands and content must be replaced before launch.
Designed as a credible product experience—not a set of disconnected sections. Every layout is ready to adapt while preserving the logic that makes it feel intentional.
Inside the build
Pages included
Technology
Next.js 16 · React 19 · TypeScript · Static export
Compatibility
Modern evergreen browsers. Responsive from compact mobile screens through wide desktop layouts.
Support & docs
README, START-HERE, buyer scope notes, a customization guide, a deployment guide, ASSET-CREDITS.md, a media manifest and a changelog. Easy to rebrand — name, URL, contacts and notices in config/brand.ts, plans in config/pricing.ts, stages and rules in config/pipeline.ts, policies in config/trust.ts, the sample firm, roles and candidates in content/, colours as CSS tokens and fonts in app/fonts.ts. Package-specific setup guidance and release notes are provided.
Before you buy
Compare the demo, included scope and integration work with your launch plan.
Read the Next.js website template checklistBuyer support
Learn how to install, customize and deploy this template step by step.
Watch on YouTubeTutorial duration · 10:06
Use it with confidence
Webloomery Template License v1.0 — one purchase covers one end product for you or one client. The full text ships as LICENSE.txt.
Read the license