Vertex
Confident, monochrome SaaS website system. A layered app-mockup hero, a run of live CSS product mockups, a release changelog and blog on content collections, a waitlist, and a 20-section homepage - all from one config file.
See Vertex in action
Every page and section is part of the download. Use these as launch-day templates - keep the structure, swap the copy.
Vertex is a complete website system for SaaS and startup products that want to look sharp without shouting. The near-monochrome palette - crisp ink on off-white, raised solid-black buttons with an inset sheen - keeps attention on the product, while a layered kanban app mockup and a run of live CSS UI mockups (an API-connector flow, trigger/condition/action rules, an automation builder, a project dashboard) carry the whole product tour with zero image assets. It ships a real site, not just a landing page: 15 page templates including a sticky-date changelog and a card-grid blog (both Astro content collections), an early-access waitlist, a customers page with case studies, an about page with a team grid, and a full 20-section homepage. A config-driven mega-menu, a monthly/annual pricing toggle, provider-switched contact and newsletter forms with no backend, and scroll-reveal throughout. Every heading, link, price, menu item, and per-page SEO title lives in one src/config/site.ts - and any built-in mockup can be swapped for a real screenshot by setting a single image path.
Best Fit For
- SaaS and B2B software products
- Dev-tool, API, and workflow-automation startups
- Seed-stage teams that need a credible marketing site fast
- Anyone launching with a waitlist before the product ships
- Teams that want a changelog and blog out of the box
Full Page Set
Every page is real and editable - no placeholders, no "coming soon" stubs.
20 Sections Included
Every section is a ready-to-use Astro component. Add it to any page, customize via config, or remove what you don't need.
What's Included
A Product Tour, Not Just a Hero
Vertex carries the whole page on live CSS interface mockups - a layered kanban app, an API-connector flow, trigger/condition/action rules, and a project dashboard - so it looks like real software from the first scroll, with zero image assets to manage.
A Complete Site Out of the Box
Fifteen page templates including a sticky-date changelog and a blog (both Astro content collections), an early-access waitlist, customers with case studies, and an about page with a team grid. Launch the marketing site, the release notes, and the blog on day one.
One Config File, Swappable Mockups
Every heading, link, price, menu item, and per-page SEO title flows from src/config/site.ts - brand the whole site without touching a component. And any built-in mockup can be replaced with your own screenshot by setting a single image path.
Forms, newsletter, and analytics - pre-wired
Vertex is ready to connect to your preferred providers. Pick from the options below, drop in a single API key, and your contact form, newsletter signup, and analytics are live - no backend, no JavaScript, no glue code.
Contact form
The Contact section's <form> renders with no JS. Set one provider in site.ts; the form action wires automatically.
- Formspree50 free submissions / month, no domain restriction
- FormSubmitFree, no signup - just an email confirmation
- Netlify FormsFree 100/month - Netlify hosting only
Newsletter
The Newsletter form sends subscribers directly to your ESP. The email input name auto-adjusts per provider.
- MailchimpStandard EMAIL field; honeypot supported
- ConvertKit (Kit)email_address field; works with any form ID
- Buttondownemail field; lightest, indie-friendly
Analytics
Layout.astro injects the right script tag based on the provider you choose. No client-side branching.
- Google Analytics 4Paste your G-XXXXXXXXXX measurement ID
- PlausiblePrivacy-friendly, ~1 KB script, no cookies
- UmamiSelf-hostable, also cookie-free
Tech Stack
Config-Driven Setup
Every theme uses a single src/config/site.ts file
for customization. Change your brand, navigation, form providers, analytics, and section content
without touching component code.
// src/config/site.ts
export const siteConfig = {
name: "Your Company",
tagline: "Your tagline here",
url: "https://yourdomain.com",
navigation: { sticky: true, links: [...], cta: {...} },
social: { twitter: "...", github: "...", linkedin: "..." },
seo: { title: "...", description: "...", ogImage: "/og.png" },
// ── Provider switches ────────────────────────────────
contactForm: { provider: "formspree", formspreeId: "your-id" },
newsletter: { provider: "convertkit", actionUrl: "https://..." },
analytics: { provider: "plausible", plausibleDomain: "you.com" },
// ── Section data ─────────────────────────────────────
team, video, timeline, comparison, gallery,
carousel, tabs, appDownload, map, footer,
} as const;Full documentation, ready before you buy
Browse the install guide, the site.ts reference, provider setup, deploy instructions, and the Vertex-specific page - all live now.