> For the complete documentation index, see [llms.txt](https://features.scnd.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://features.scnd.com/v2.0/front-office/front-interface-structure.md).

# Front interface structure

Understanding how to use the different Front interface components

<mark style="color:blue;">Path: Front</mark>

* [Definition](#id-1.16.x-frontinterfacestructure-definition)
* [Create an interface structure](#id-1.16.x-frontinterfacestructure-createaninterfacestructure)
* [Read an interface structure](#id-1.16.x-frontinterfacestructure-readaninterfacestructure)
  * [Navigation bar](#id-1.16.x-frontinterfacestructure-navigationbar)
    * [The platform logo](#id-1.16.x-frontinterfacestructure-theplatformlogo)
    * [The login/register button or the user avatar](#id-1.16.x-frontinterfacestructure-thelogin-registerbuttonortheuseravatar)
    * [The hamburger menu](#id-1.16.x-frontinterfacestructure-thehamburgermenu)
  * [Footer](#id-1.16.x-frontinterfacestructure-footer)
* [Update an interface structure](#id-1.16.x-frontinterfacestructure-updateaninterfacestructure)
  * [Header](#id-1.16.x-frontinterfacestructure-header)
  * [Footer](#id-1.16.x-frontinterfacestructure-footer.1)
* [Delete an interface structure](#id-1.16.x-frontinterfacestructure-deleteaninterfacestructure)
  * [Header](#id-1.16.x-frontinterfacestructure-header)
  * [Footer](#id-1.16.x-frontinterfacestructure-footer.1)
* [Related resources](#id-1.16.x-frontinterfacestructure-relatedresources)

## Definition <a href="#id-1.16.x-frontinterfacestructure-definition" id="id-1.16.x-frontinterfacestructure-definition"></a>

Numerous interface elements are reused across the platform, ensuring cohesion of the user experience.

<mark style="color:red;background-color:yellow;">WHO CAN USE THIS FEATURE?</mark>

All users

## Create an interface structure <a href="#id-1.16.x-frontinterfacestructure-createaninterfacestructure" id="id-1.16.x-frontinterfacestructure-createaninterfacestructure"></a>

New elements cannot be created from the platform’s Front interface.

***

## Read an interface structure <a href="#id-1.16.x-frontinterfacestructure-readaninterfacestructure" id="id-1.16.x-frontinterfacestructure-readaninterfacestructure"></a>

### Navigation bar <a href="#id-1.16.x-frontinterfacestructure-navigationbar" id="id-1.16.x-frontinterfacestructure-navigationbar"></a>

The navigation bar (navbar) is consistently located at the top of each page. It enables users to personalize their platform experience according to their specific goals. Depending on the selected preferences, the homepage adjusts to function either as a solution tailored for **customers** seeking services and service providers proposing their offerings (Figure 1) , or **vendors** searching for service  and services proposals (Figure 2) .&#x20;

<figure><img src="https://2306631548-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4EIoqjZx1xWQIo6LnjB%2Fuploads%2FrL1bZfigco9hOViVy12G%2Fimage.png?alt=media&amp;token=181ab6d9-bd05-444d-9b8e-0d3407807471" alt=""><figcaption><p>Figure 1</p></figcaption></figure>

<figure><img src="https://2306631548-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4EIoqjZx1xWQIo6LnjB%2Fuploads%2FPHBoxcZFg2Qg3jgql2EH%2Fimage.png?alt=media&amp;token=a709bc40-b22c-40cf-b5ad-ca1bb4791aba" alt=""><figcaption><p>Figure 2</p></figcaption></figure>

{% hint style="info" %} <mark style="color:blue;">When the configuration switch mode is not enabled by the operator, users are restricted to operating within the marketplace solely as either a customer or a vendor. This designation is determined at the time of registration.</mark>
{% endhint %}

The navbar is made up of:

#### The platform logo <a href="#id-1.16.x-frontinterfacestructure-theplatformlogo" id="id-1.16.x-frontinterfacestructure-theplatformlogo"></a>

The platform’s logo (figure 2) is visible to all users.\
Clicking the logo will redirect the user to the following page: [Homepage](/v2.0/front-office/homepage.md)

<figure><img src="https://2306631548-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4EIoqjZx1xWQIo6LnjB%2Fuploads%2Fa4jC6KVJyASYE3MO273a%2Fimage.png?alt=media&amp;token=4edc5f5f-e778-4229-b89c-80ea58093a71" alt=""><figcaption><p>Figure 2</p></figcaption></figure>

#### The login/register button or the user avatar <a href="#id-1.16.x-frontinterfacestructure-thelogin-registerbuttonortheuseravatar" id="id-1.16.x-frontinterfacestructure-thelogin-registerbuttonortheuseravatar"></a>

**Login/register button**

The login/register buttons (figure 3.1) are displayed when a user is not logged in to the platform. Once the user is logged in, the user’s avatar will be displayed instead.

Clicking one of the two buttons will open a modal to log in or register. This process is described in the following documentation: [Log in & Register](/v2.0/front-office/log-in-and-register.md)

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/M2w5Y7rElhaTfVtd9VEJ/image.png" alt=""><figcaption><p>Figure 3.1</p></figcaption></figure>

**The user avatar**

The user’s avatar (figure 3.2), allows navigating through the dashboard menu quickly upon clicking it.

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/W2W5MDP5mc3jpXN6EoS5/image.png" alt=""><figcaption><p>Figure 3.2</p></figcaption></figure>

**Platform mode**

The platform's mode can be adjusted to align closely with user preferences within the marketplace. By selecting the "Become a customer"(Figure 4) button, the system automatically configures essential elements such as listing services and a customizable search bar tailored to the user's needs. Additionally, users have the option to post requests for proposals, enabling them to advertise services they seek or negotiate for the best possible deals.

<figure><img src="https://2306631548-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4EIoqjZx1xWQIo6LnjB%2Fuploads%2FkvKZcVcXrdc0z0TZ3NS0%2Fimage.png?alt=media&amp;token=eec8ae69-97c8-40fc-968c-53a84a041d7d" alt=""><figcaption><p>Figure 4</p></figcaption></figure>

On the opposite side is the "Become a Vendor" button (figure 4.1), designed to set up the marketplace with tools that help users manage their business activities within the platform. This feature enables vendors to create service listings and utilize additional resources for promoting and executing their services effectively across the marketplace.

<figure><img src="https://2306631548-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn4EIoqjZx1xWQIo6LnjB%2Fuploads%2FBZVyHD8mI4KzkZBL3uWo%2Fimage.png?alt=media&amp;token=60577737-012f-4dfe-b149-1c5d6c4b0c59" alt=""><figcaption><p>Figure 4.1</p></figcaption></figure>

#### The hamburger menu <a href="#id-1.16.x-frontinterfacestructure-thehamburgermenu" id="id-1.16.x-frontinterfacestructure-thehamburgermenu"></a>

The hamburger menu (figure 5.1) displays the content pages set by the administrator. The hamburger menu opens with a single click (figure 5.2 ).

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/zGesFBdtwn6BaADSqaig/image.png" alt=""><figcaption><p>Figure 5.1</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/zKXWCS3cLfIXwXlHI6YZ/image.png" alt=""><figcaption><p>Figure 5.2</p></figcaption></figure>

### Footer <a href="#id-1.16.x-frontinterfacestructure-footer" id="id-1.16.x-frontinterfacestructure-footer"></a>

The footer displays institutional pages to users (figure 6). These pages are usually for information purposes.

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/p6IRPU2CHXqVbJIGEXqR/image.png" alt=""><figcaption><p>Figure 6</p></figcaption></figure>

2 dropdown buttons (figure 6.1) are available on the left side of the footer:

* Language selection, allows the user to select the platform language
* Currency selection, enable the user to choose the display currency.

{% hint style="info" %} <mark style="color:blue;">The display currency only changes the displayed prices. Payments are still made in the default platform currency set by the platform administrator.</mark>
{% endhint %}

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/IIoiLKgXs8wpDk1XyiXy/image.png" alt=""><figcaption><p>Figure 6.1</p></figcaption></figure>

Setting up the footer pages (figures 6.2 and 6.3) is described in the following documentation: [Content page.](/v2.0/front-office/content-page.md)

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/QwyOcZqZCEfYaTIAu6qk/image.png" alt=""><figcaption><p>Figure 6.2</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/n4EIoqjZx1xWQIo6LnjB/blobs/hjUFL9WljnZg9Y4BCgLb/image.png" alt=""><figcaption><p>Figure 6.3</p></figcaption></figure>

## Update an interface structure <a href="#id-1.16.x-frontinterfacestructure-updateaninterfacestructure" id="id-1.16.x-frontinterfacestructure-updateaninterfacestructure"></a>

### Header <a href="#id-1.16.x-frontinterfacestructure-header" id="id-1.16.x-frontinterfacestructure-header"></a>

Only the super-administrator can update the header content pages (figure 5.2). Instructions are provided here: [Header menus](/v2.0/superadmin/contents/header-menus.md)

### Footer <a href="#id-1.16.x-frontinterfacestructure-footer.1" id="id-1.16.x-frontinterfacestructure-footer.1"></a>

Only the super-administrator can update the footer content pages (figure 6.3). Instructions are provided here: [Footer menus](/v2.0/superadmin/contents/footer-menus.md)

## Delete an interface structure <a href="#id-1.16.x-frontinterfacestructure-deleteaninterfacestructure" id="id-1.16.x-frontinterfacestructure-deleteaninterfacestructure"></a>

### Header <a href="#id-1.16.x-frontinterfacestructure-header.1" id="id-1.16.x-frontinterfacestructure-header.1"></a>

Only the super-administrator can delete the header content pages (figure 5.2). Instructions are provided here: [Header menus](/v2.0/superadmin/contents/header-menus.md)

### Footer <a href="#id-1.16.x-frontinterfacestructure-footer.2" id="id-1.16.x-frontinterfacestructure-footer.2"></a>

Only the super-administrator can delete the footer content pages (figure 6.3). Instructions are provided here: [Footer menus](/v2.0/superadmin/contents/footer-menus.md)

## Related resources <a href="#id-1.16.x-frontinterfacestructure-relatedresources" id="id-1.16.x-frontinterfacestructure-relatedresources"></a>

**SBO :**

* &#x20;[Header menus](/v2.0/superadmin/contents/header-menus.md)
* [Footer menus](/v2.0/superadmin/contents/footer-menus.md)

**Front :**

* [Homepage](/v2.0/front-office/homepage.md)
* [Log in & Register](/v2.0/front-office/log-in-and-register.md)
* [Listing deposit pages](/v2.0/front-office/rendering-types.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://features.scnd.com/v2.0/front-office/front-interface-structure.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
