Enigma

The Enigma Starter Kit is a styled Next.js website template, based around a tech startup. It comes with a page builder, header and footer navs and a collection of composable content blocks and is styled with Tailwind CSS.

All our starter kits follow a similar setup, so if you've followed the setup guide using the Minimal kit so far, you should have been able to set up this kit in the same way. The only difference between the Enigma Starter Kit and the Minimal Starter Kit is that this one has a few additional or modified content blocks and is fully styled.

Blocks

The blocks available in this kit are as follows:

Button

Image

Image and Text

Hero
The Hero block has subtitle, title, text, image and button fields. The title field is outputted as the h1 for the page and uses the markdown syntax for bold to change the colour of the word to teal e.g. __hello__.

Text
The Text block has a text rich text field and a hardcoded icon from React Icons.

Three Colum Grid
The Three Column Grid block has an internal name field and a content field which contains the nested card with icon block. On the card with icon block you will find a drop down field for the icon which uses the function in utils > Icons.tsx to output the correct icon svg from React Icons.

Form
The Form block has only an internal name field in Contento. The name, email and message inputs on the form are hardcoded within the Form component. The Form component is designed as a visual placeholder and does not send the information anywhere. Please implement your own form handler method.

You will find them in the components > blocks folder. This is where you should create a file for any new blocks you wish to make for your website and then add them to the BlockMatcher.tsx file.

Utility Functions

Within the utils folder there are several files with helper functions for this starter kit.

ClassNames.ts that has a function that allows for conditional css within the className attribute of your elements or components.

Image.tsx which uses the Image Component to optimise the imagery and make use of our Image Optimization API.

Icons.tsx which contains a switch statement that outputs the icon svg in the three column grid cards.

Credits

We’ve used modified imagery from the very talented Creative Tim in this kit.