Doorgaan naar content

Change how your company teaches and practices cyber security

logo-black-secure-practice

Overzicht

Features

Uitgebreid ontwerp met veel contentblokken, Dark/light mode, Squiggles, Pricing tiers en feature matrix, Teampagina's, Blog, Manifesto's, FAQ's, Guides, Customer stories, Careers

Gebruikte technieken

AlpineJS, Laravel, Livewire, Peak, Statamic, Tailwind CSS, Canvas
Secure Practice homepage screenshot.

Secure Practice helpt bedrijven om zich te verbeteren op het gebied van cyber security. Dit doen ze met behulp van trainingen en hun eigen software. Het bedrijf wordt onder andere gefinancierd door de Europese Unie.

Dave Smyth heeft het ontwerp verzorgd en mij benaderd om de technische implementatie te verzorgen. Secure Practice is een grote website en heeft een lichte en donkere modus. De page builder biedt meer dan 25 dynamische contentblokken die elk kunnen worden voorzien van hun eigen squiggle-animates. Dit zijn kleurrijke lijnen die zichzelf tekenen als de gebruiker voorbij komt.

In het volgende screenshot zie je hoe content editors dit in Statamic kunnen beheren.

Live preview content editing.
Squiggles bewerken in Live Preview.

Hieronder zie je een ander content block. Zogeheten “Squiggle Cards”. Kaarten met tekst voorzien van een geanimeerde en kleurrijke lijn.

Live preview content editing.
Squiggle cards bewerken via Live Preview.

Aan de voorkant van de website kunnen gebruikers blog-artikelen filteren. Met behulp van Laravel Livewire werkt dit snel en zonder dat de browser de pagina hoef te verversen.

Blog filters.
Blog-artikelen filteren.

De verschillende prijsmodellen van Secure Practice, zoals ze zichtbaar zijn voor bezoekers. Aan de achterkant kunnen content editors verschillende tiers aanmaken en koppelen aan features.

Pricing tiers screenshot.
Pricing tiers.

Deze features verschijnen automatisch in een matrix.

Feature matrix screenshot.
Feature matrix.

Pro-deo voor lokaal project.

studio-1902-logo
  • AlpineJS
  • Mollie
  • Laravel
  • Peak
  • Tailwind CSS