LumoraSaaS Landing

Open index.html in a text editor: every word on the page is written there, so it is what search engines read. It links two files that sit next to it:

<link rel="stylesheet" href="saas-landing.css" />
<script src="saas-landing.js" defer></script>

• Prices: each <span data-price data-monthly="29" data-yearly="23">29</span> is a price per seat per month; keep the monthly one as the text. The status lines the switch announces are data-status-monthly / data-status-yearly on the [data-pricing] element.
• Features: copy one <li class="sl-tile">. sl-tile--large, --wide or --small sets its size; the scene inside is sl-visual--signals, experiments, copilot, realtime, roadmap, privacy or integrations.
• Logos: one <li class="sl-wordmark sl-wordmark--a"> per company; a to h are eight different marks. Swap in <img> tags for real logos.
• Numbers: <span data-countup="99.99" data-decimals="2" data-suffix="%">99.99%</span> counts up to data-countup (also data-prefix). Keep the final value as the text.
• FAQ: one <details name="faq"> per question. The shared name keeps one open at a time.
• Testimonials: one [data-carousel-slide] per quote; the dots are drawn for you.

The script wires everything by data attribute once the page has loaded. For markup you add later, call SaasLanding.init(container); it returns a function that undoes it. The readable source is in src/ (src/core/ holds one small module per behaviour) if you want to rebuild it.

The download is a complete Vite + React 19 + TypeScript project:

npm install
npm run dev      # http://localhost:5173
npm run build    # static files in dist/

• src/app/content.ts — every word, price, quote and answer, typed. Edit here and the page follows.
• src/app/sections/ — one component per section; src/app/ui/ — the atoms and molecules they share.
• src/core/ — the behaviour (theme, menu, scroll-spy, pricing, carousel, count-up…), the same code the HTML build runs, attached with the useBehaviour hook.
• src/saas-landing.css — the one stylesheet both builds use.

It works with React 18 and 19.

App.tsx starts with "use client", so the App Router can render it as is. Copy src/app, src/core and src/saas-landing.css into your project (for example under components/lumora/, keeping the three side by side), then:

// app/page.tsx
import { App } from "@/components/lumora/app/App";

export default function Page() {
  return <App />;
}

Give <body> the id top in app/layout.tsx (the logo and "Back to top" link to it). To apply a saved theme before the first paint, copy the small inline script from index.html into the layout's <head> and add suppressHydrationWarning to <html>.

With no action, the form only checks the address and shows the thank-you message, so the demo works offline. To collect sign-ups, give it the address of your mailing-list or form service — Buttondown, ConvertKit, Formspree, or your own endpoint that accepts a form POST and answers with a 2xx status:

<form class="sl-newsletter__form" action="https://formspree.io/f/your-form-id" method="post" novalidate …>

In React, set action in NEWSLETTER in content.ts. The fields are sent as form data with Accept: application/json; if the service answers with an error, visitors are asked to try again. The hidden _gotcha field catches simple spam bots. Error messages live on the field: data-error-required and data-error-email.

Everything is a custom property on :root, at the top of saas-landing.css. Colours are written as light-dark(light, dark), so one line covers both themes.

Property	What it changes
--sl-bg, --sl-bg-raised, --sl-bg-sunken, --sl-text, --sl-muted	Page, card and text colours
--sl-line, --sl-line-strong, --sl-glass, --sl-glass-strong, --sl-glass-edge, --sl-shadow	Hairlines, frosted glass and shadows
--sl-violet, --sl-pink, --sl-cyan, --sl-green	The aurora colours, used in the sky, gradients and highlights
--sl-gradient, --sl-gradient-text	The brand gradient, and its higher-contrast version for text
--sl-aurora-strength	How strongly the aurora shows (set per theme)
--sl-cta, --sl-on-cta, --sl-cta-glow	Main button, its text and its glow
--sl-focus, --sl-danger, --sl-success	Focus ring, form errors, success states
--sl-font-display, --sl-font-body, --sl-font-mono, --sl-display-weight	Type
--sl-radius-xl, --sl-radius-lg, --sl-radius, --sl-radius-sm, --sl-max, --sl-gutter, --sl-section-space	Shape and layout
--sl-ease, --sl-reveal-duration, --sl-aurora-duration, --sl-mock-loop, --sl-feature-loop, --sl-marquee-duration	Motion

Fonts: the page uses system fonts only, so it loads nothing. To use your own, add an @font-face (or a font service's stylesheet) and set, for example, --sl-font-display: "Your Display", sans-serif;.

Theme: data-theme="light" or "dark" on <html> fixes the starting theme; without it the visitor's system decides. The toggle remembers a visitor's choice in localStorage (saas-landing-theme).

Both builds are static files: upload the HTML folder, or the React project's dist/ after npm run build, to Netlify, Vercel, Cloudflare Pages, GitHub Pages or any web host.