Ward

A cybersecurity company site template.

A complete website for a managed detection and response company, built with Astro 5, TypeScript and plain CSS, Motion and anime.js for interface motion, and one three.js moment: the hero shows your network as a field of dots where probe rings break on the rim of a shield-shaped protected zone, and inside it nothing moves. Sample content is a fictional company, Ward, so you see every page at real density before you put your own in.

For: Cybersecurity
Built with: Astro 5, TypeScript, plain CSS, Motion, anime.js, three.js
Pages: 8 designed pages
Themes: Light and dark, following the system, with a switch

Draft listing: this template is finished but still in review before it goes on sale.

The 3D moment

A network drawn as a dot field where probe rings break on the accent rim of a shield-shaped protected zone, and inside it nothing moves.

What you get

Straight from the template's README, the same file you will find in the repository.

Seven page types from one content file: home, platform, pricing, advisories, a page per advisory, incident help and contact, plus a designed 404.
The signature hero scene: a dot field with two slow swells, probe rings that travel in and break on an accent rim, and a calm raised zone of watched endpoints. Lazy loaded, paused off screen and in background tabs, pixel ratio capped at 2, one still frame under reduced motion.
The product in the hero: a live incident card from the console laid over the scene, its rows ticking in like a feed (Motion).
A proof band after the hero: the year in figures, the sectors you serve in plain type, and four customer quotes on a card shuffle deck (fans, closes, tucks the top card under, on a calm loop), with Previous, Pause and Next. Pauses off screen, on hover and focus; reduced motion turns the loop off.
The customer console: the read-only dashboard that pairs with the site (figures, alerts per day against "your normal", what is left for the customer, the actions they agreed). The chart draws itself once with anime.js and has a text table for screen readers.
A matching still picture of the scene for each theme, drawn at build time from the same geometry, shown before the scene loads, without WebGL and without script.
"Pick an attack, see our first hour": tabs for three attack scenarios with a minute-by-minute response timeline and the moment of containment marked. Full keyboard support; without script all three show in full.
A pricing calculator: devices and plan in, monthly and yearly cost out, with minimum and maximum handled. Worked examples replace it without script.
Advisories with a severity filter that keeps its state in the URL, an empty state, and severity shown as three signal dots plus the word, never colour alone.
An incident help page built for someone mid-attack: the phone number first and largest, the next ten minutes as a checklist, and a call-back form.
Two forms with validation, sending, sent and failed states, and a demo mode until you connect them.
Light and dark themes that look different from the first screen down, follow the system, and remember the visitor's choice. The scene recolours live.
Accessible and fast: semantic HTML, a skip link, visible focus, AA contrast in both themes (checked by script), 44 px touch targets, two self-hosted variable fonts, no trackers, no runtime CDN, no layout shift.
Responsive from 320 px to wide desktop, designed at 390, 768 and 1440.

Pages and stack

Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.

Stack

Astro 5
TypeScript
plain CSS
Motion
anime.js
three.js

What is not included

A blog engine or CMS: advisories live in src/content.ts.
Form handling on a server: point the forms at your own endpoint or a form service.
Your own photographs: the two demo photos are Pixabay images graded into the site's green (see IMAGES.md). Replace them before you publish.

The licence, in short

One purchase covers every site you build. Read the whole licence

You can

Build as many websites and web apps with it as you like, for yourself or for clients.
Change anything: code, design, copy, colours and layout.
Charge clients for the work and hand them the finished site with its source code.

You cannot

Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.