# Front interface structure

<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>

Several interface structure elements are available throughout the platform. These elements help make user navigation more fluid.

<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&#x26;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&#x26;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](https://features.scnd.com/v2.0/front-office/homepage)

<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&#x26;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](https://features.scnd.com/v2.0/front-office/log-in-and-register)

<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&#x26;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&#x26;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.](https://features.scnd.com/v2.0/front-office/content-page)

<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](https://features.scnd.com/v2.0/superadmin/contents/header-menus)

### 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](https://features.scnd.com/v2.0/superadmin/contents/footer-menus)

## 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](https://features.scnd.com/v2.0/superadmin/contents/header-menus)

### 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](https://features.scnd.com/v2.0/superadmin/contents/footer-menus)

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

**SBO :**

* &#x20;[Header menus](https://features.scnd.com/v2.0/superadmin/contents/header-menus)
* [Footer menus](https://features.scnd.com/v2.0/superadmin/contents/footer-menus)

**Front :**

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