Landing Pack

Quick start

1. Unzip the package. The templates live in pack/.
2. Open pack/index.html in your browser to preview all three pages, or open a page directly: pack/saas/index.html, pack/app/index.html, pack/event/index.html.
3. Pick the page you need, edit the text in its index.html, change the colours at the top of its style.css.
4. Set data-endpoint on each form (see Forms) so submissions reach you.
5. Upload the page folder together with pack/assets/ to any static host. Done.

No build step, no package manager, no frameworks. Everything works from the file system or any web server.

Features

• 3 complete landing pages, each with its own brand style and fonts:
  • SaaS product (“Pulsegrid”) — dashboard mockup with animated chart and funnel, bento feature grid, steps, counters, monthly/yearly pricing.
  • Mobile app launch (“Tidewell”) — animated CSS phone mockups, store buttons, feature split, plans, download-link form.
  • Online course / event (“Craftline Academy”) — live countdown ticket, curriculum, instructors, agenda, tickets, registration form.
• Every page has: sticky header with mobile menu, hero, logo strip, features, pricing, testimonials, FAQ, call-to-action and footer.
• Light and dark theme on every page — follows the visitor’s system setting, toggle saved in the browser.
• Scroll animations (fade, slide, zoom, count-up) that respect “reduce motion”.
• Working forms: validation, accessible error messages, spam honeypot, and sending to any endpoint via data-endpoint.
• Fully responsive from 360 px phones to wide desktops; semantic HTML, skip link, labels, visible focus, good contrast.
• Self-hosted fonts, inline SVG icons, no external requests, no tracking.

File structure

pack/
  index.html            preview page linking all three templates
  assets/
    css/base.css        shared layout, components and animations
    js/landing.js       shared behaviour (theme, menu, reveal, pricing, countdown, forms)
    fonts/              Manrope, Outfit, Fraunces, DM Sans (woff2) + OFL licences
    favicon.svg
  saas/   index.html · style.css · favicon.svg
  app/    index.html · style.css · favicon.svg
  event/  index.html · style.css · favicon.svg · img/ (speaker photos)
documentation/index.html   this file
README.md · CHANGELOG.md · LICENSE.txt · THIRD-PARTY.txt

Each page loads ../assets/css/base.css, its own style.css and ../assets/js/landing.js. To ship a single page, copy its folder plus assets/ and keep the same relative layout (or update the three paths in the page’s <head> and footer).

Customise & rebrand

Colours and fonts

Open the page’s style.css. The first two blocks hold the design tokens for light (:root) and dark ([data-theme="dark"]):

:root {
  --bg: #fbfbfe;        /* page background */
  --bg-2: #f3f3fa;      /* alternate section background */
  --surface: #ffffff;   /* cards */
  --line: #e5e5f0;      /* borders */
  --ink: #11111d;       /* text */
  --mute: #5d5e72;      /* secondary text */
  --accent: #5b4cf5;    /* buttons, links, highlights */
  --accent-2: #19c6a7;  /* secondary highlight */
  --accent-ink: #fff;   /* text on accent buttons */
  --font-head: "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

To use another font, put its .woff2 in assets/fonts/, add an @font-face at the top of the page’s style.css and change --font-head / --font-body.

Logo, name and favicon

The logo is an inline SVG inside <a class="logo"> in the header and footer — replace it with your own SVG or an <img>. Replace favicon.svg in the page folder. Update <title>, the meta description and the Open Graph tags in the <head>.

Default theme

Set data-theme="light" or "dark" on the <html> tag. Visitors who press the toggle keep their choice. Remove the toggle button if you want one fixed theme. For previews you can force a theme with ?theme=dark or ?theme=light in the URL.

Sections

Every section is a self-contained <section> with a comment above it. Delete, duplicate or reorder sections freely — the script only acts on elements that exist. Update the matching links in the header <nav> when you rename section ids.

Mockups and images

The dashboard (SaaS) and phone screens (App) are plain HTML/CSS, so numbers and labels are edited as text. To use real screenshots instead, replace the mockup markup with an <img>. Speaker photos are in event/img/ (480×560 WebP).

Animations

Add data-reveal to any element to fade it in on scroll. Options: data-reveal="left|right|zoom" and data-delay="120" (ms). Numbers count up with data-count="2400" data-suffix="+" (also data-prefix, data-decimals). Animations are skipped for visitors with “reduce motion” and when the URL contains ?static.

Forms

All forms use the attribute data-form and are handled by landing.js: required fields, email format and minimum length are validated with clear, accessible messages; a hidden honeypot field (.hp) silently drops bots.

Example — send to a form service or your own script:

<form data-form="saas-cta" data-endpoint="https://example.com/api/signup" data-format="form"
      data-success="Thanks! Check your inbox.">

Besides your fields, each submission includes form (the data-form name) and page (the page path). Any 2xx response counts as success. Most hosted form services, newsletter tools with a form URL, serverless functions or a small PHP script work. If the endpoint is on another domain it must allow CORS.

After a successful send the form fires a lp:sent event you can listen to (for example to show a thank-you section).

Interactive parts

Browser support

Current versions of Chrome, Edge, Firefox and Safari (desktop and mobile). The templates use CSS custom properties, grid and color-mix(); content stays fully readable without JavaScript (animations simply don’t run).

FAQ

Can I use only one of the three pages?

Yes. Copy that page’s folder plus assets/. You can delete the other folders and pack/index.html.

Do I need a server for the forms?

You need somewhere to receive the data: a form service, newsletter tool, serverless function or your own script. Without an endpoint the forms run in demo mode.

Can I use the pages in a CMS or framework?

Yes — it is plain HTML, CSS and a small vanilla script, so it drops into WordPress themes, static site generators, React/Vue projects or page builders that accept custom HTML.

Which licence do I need?

The Licence covers one end product (for you or one client). Full source covers one production domain for you and your clients, including white-label and SaaS use. Neither allows reselling the templates themselves. See LICENSE.txt.

Are the brands, people and photos real?

No. Pulsegrid, Tidewell, Craftline Academy, all company logos, people, quotes and numbers are fictional sample content. Replace them with your own.

Support

Questions or found a bug? Email hello@vortaxis.com with your order number. Bug fixes and updates for your version are free. See LICENSE.txt for the support period.