Payday

Payday is a free Astro theme for SaaS and product marketing sites, built as a single long landing page plus an about page and a contact page, shipped as static output with no framework islands. The theme is authored by xocothemes and released under the MIT license, free for personal and commercial projects.

What is Payday?

Payday is an Astro 7 theme for SaaS and product sites. Its demo shows a fictional global payroll product told across one long landing page with grainy gradients and product UI mocked up in plain HTML and CSS. It takes editable copy and data from TypeScript config files and produces a statically built site that runs on any host serving a directory — Cloudflare Workers, Netlify, Vercel, GitHub Pages, or object storage behind a CDN.

Key Features

• Astro 7 with Tailwind CSS 4 — styling comes through the Tailwind Vite plugin, with TypeScript configured and @astrojs/sitemap plus Sharp for image handling.
• Grainy gradient hero — a full-bleed hero under a transparent header containing a payroll app rendered entirely in HTML and CSS, no images required.
• Interactive sections in CSS — keyboard-accessible tabs each carry their own product panel, and the pricing monthly/yearly toggle works in CSS alone.
• Landing page modules — logo marquee that pauses on hover, payroll table over a pastel gradient, stats and customer quote, bordered six-cell feature grid with small product mockups, customer story cards, and a closing band.
• FAQ and security block — the FAQ is built on native disclosure elements; the security section displays SOC 2, GDPR, and ISO 27001 seals.
• Header and motion behaviour — the header hides on scroll down and returns on scroll up, a full-screen mobile menu is included, and CSS scroll-reveal motion is switched off for reduced-motion users.
• SEO defaults — canonical URLs, Open Graph and Twitter/X cards, a sitemap, robots.txt, and JSON-LD, all derived from siteConfig.siteUrl in src/config/site.ts.
• Self-hosted assets — Libre Franklin and Geist Mono fonts, a local Lucide icon set, and design tokens in one stylesheet.

Who is it for?

• SaaS founders and indie developers: launch a marketing site for a product without building page sections from scratch.
• Freelance developers and agencies: use Payday as a starting point for client landing pages, swapping the config copy for real product data.
• Astro learners: read a working example of static output with no framework islands, CSS-only interactivity, and config-driven content.

What can you do with Payday?

• Ship a product landing page fast: edit src/config/home.ts for home copy, src/config/about.ts for the about page, and src/config/contact.ts for contact, then set your site URL and build.
• Deploy anywhere static: run npm run build and upload the output; a wrangler.jsonc is included for Cloudflare Workers and other hosts need no extra configuration.
• Check before shipping: npm run release:check runs type checking, the production build, and the formatter check together.

Pricing

Payday is free and MIT-licensed, provided as-is. Bug reports and questions go to GitHub issues; custom design and feature work is not included. The bundled fonts, icons, and photographs carry their own license notices listed in the LICENSE file.

FAQ

Is Payday free?

Yes. Payday is released under the MIT license and is free for personal and commercial projects. The LICENSE file also lists the licenses of the bundled fonts, icons, and photographs.

What Node.js version does Payday require?

Payday requires Node.js 22.12.0 or newer, plus npm. Install with npm install, develop with npm run dev, and build for production with npm run build.

Do I need to change anything before launch?

Yes. The product, companies, people, and quotes in the demo are fictional and should be replaced with your own. Set siteConfig.siteUrl in src/config/site.ts before building, since canonical URLs, social images, the sitemap, robots.txt, and structured data derive from it.

Does Payday include blog or documentation pages?

No. The demo covers a home landing page, an about page, and a contact page. There is no blog or docs section listed in the theme's pages.