logo
Get in touch

Control Panel Section

Change the cards that describe your control panel.

The control panel section shows multiple cards explaining what your panel can do.

You will use:

  • config/panel-features.ts — list of cards and their images
  • "PanelFeatures" in config/messages/en.json and config/messages/es.json — titles and descriptions

Step 1 – Edit or add cards

  1. Open config/panel-features.ts.
  2. You will see a list like:
features: [
  {
    titleKey: "panelFeature1Title",
    descriptionKey: "panelFeature1Description",
    image: "/panel-features/panel-feature-1.svg"
  },
  // more cards...
],
  • Each object is one card.
  • image points to a file under public/panel-features/.

To add a new card, copy one object and change:

  • The image path (use your own file in the public folder).
  • The keys, for example panelFeature4Title and panelFeature4Description.

Step 2 – Change the text in each language

  1. Open config/messages/en.json.

  2. Find the "PanelFeatures" section.

  3. Change:

    • The main "title" and "description" for the section.
    • Each panelFeatureXTitle and panelFeatureXDescription for your cards.
  4. Open config/messages/es.json.

  5. In the "PanelFeatures" section, make sure the same keys exist and set your Spanish text.

Always create the same keys in both en.json and es.json.
The names (for example "panelFeature1Title") must match what you used in config/panel-features.ts.