Page Comparison

Website Management Overview

Image Added

CMS Managed Components

Portions of the website http://FIO.net are managed through the Webflow CMS collections system.

It is located in the left-hand rail midway down as seen in this screenshot.

The following are the key area that can be managed on the site:

What’s New Tiles
- Displayed on the home page
Top Banner
- Persists across the top of the website
Progress
- Displayed on the home page
- Displayed on the progress page
Ecosystem / Partners
- Displayed on the home page (4 key highlights)
- Displayed on the ecosystem / partner page
Use Guides
- Displayed and connected to ecosystem/partner page
  - Example: Coinpayments
Video Guides
- Displayed and connected to ecosystem/partner page
  - Example:

...

- - Edge Wallet
People Behind FIO Tiles
- Displayed on the People Behind FIO page
Research and Education Tiles
- Displayed on the Research page
Get Involved Tiles
- Displayed on the Get Involved page
App Tiles
- Displayed on the App page
Why Integrate Tiles
- Displayed on the Why Integrate page
Benefits Tiles
- Displayed on the Features & Benefits page
Differentiators Tiles
- Displayed on the Features & Benefits page
Web3 Wallet Tiles
- Displayed on the Wallet as a Service page
Privacy Policies
- Displayed in the footer

Image Added

States of Content in Webflow

Draft - Saves a draft of the work your are working on.
Published - Will published your work to the test instance and/or live website
- NOTE: New work will not be pushed out into the wild until it is published.
Unpublished - Will unpublished your work to the test instance and/or live website

Components

What’s New Tiles

Purpose
- The purpose of the What’s New Tile section is to highlight the three most current and exciting things happening at FIO
- Only 3 can be published at once
  - As the tile ages out, it should be switched to draft mode (if a legacy copy is needed)
  - Tile must be published to display on the website
Manage Elements
- Feature Icon / Image
  - 125px X 125px png files
- Styling
  - Background Color
    - Add background hex color (brand colors)
      - #765CD6
      - #22A2FF
      - #B65CD6
      - #252525
- Year
  - Select Current Year
- Content
  - Name - This is title of the tile
  - Slug - The slug is auto-generated based on the name
  - Description - The description populates the main content area within the Tile
- CTA
  - Button Text - This is the button text
  - Button Link - This links the button to the relative view
    - Opens new tab for the user to access external details

Screen Shot 2024-03-12 at 11.37.58 AM (3).png

Top Banners

Purpose
- The purpose of the top banner is to quickly highlight an action for the user to take or informational highlight
- Only 1 can be published at once
  - The top banner must be published to display on the website
Manage Elements
- Content
  - Name - This is title of the top banner
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Text - The description populates the main content area within the top banner
  - Turn ON Banner
    - Must be enabled for the banner to be displayed
- CTA
  - Text
    - Text can be hyperlinked in order to drive the user to specific actions or view.
    - Create a hyperlink within the text field
  - Close
    - This is hard coded and allows the user to dismiss the banner

Image Added

Progress

Purpose
- To highlight and demonstate the FIO protocol’s growth and maturity since it’s first launch
Manage Elements
- Content
  - Name - This represents the title of the progress
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Description
      - Provides short description within the tile
    - Link
      - Opens new tab for the user to access external details
    - Icon
      - Feature Icon / Image
        125px X 125px png files
    - Order
      - Selects display order
    - Year
      - Filters by the progress year
    - Type from collection
      - Filters by collection type
      - Can have multiple collection types selected
    - Date
      - Provides date of event/progress

Progress Years

Purpose
- To bind the progress highlight to the year it occured
Manage Elements
- Content
  - Name - This represents the year
  - Slug - The slug is auto-generated based on the name

Progress Types

Purpose
- To bind the progress highlight to the type of progress category
Manage Elements
- Content
  - Name - This represents the progress type
  - Slug - The slug is auto-generated based on the name
- Custom Field
  - Order filtering list - Provides the numerical order in the list for filtering on the progress page

Image Added

Eco-systems

Purpose
- To highlight and demonstate FIO’s vast network and eco-system
Manage Elements
- Content
  - Name - This is title of the top banner
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Rank
    - Logo
      - Feature Icon / Image
        250px X 250px png files
      - Design Assets
    - Type
      - Filters by partner type
    - Feature
    - URL
    - Hide guides section
    - - Filters by the feature
      - Can be multi-selected
    - URL
      - Opens new tab for the user to access the ecosystem/partner page
    - Shows or hides guides section
      - This links both the eco-system user guide and the video guide

Eco-systems Types

Purpose
- To bind the eco-system partner to an eco-system type
Manage Elements
- Content
  - Name - This represents the eco-system type
  - Slug - The slug is auto-generated based on the name
- Custom Field
  - Order filtering list - Provides the numerical order in the list for filtering on the ecos-system page

Eco-systems Features

Purpose
- To bind the eco-system partner to eco-system features
Manage Elements
- Content
  - Name - This represents the feature type
  - Slug - The slug is auto-generated based on the name
- Custom Field
  - Order filtering list - Provides the numerical order in the list for filtering on the progress page

Image Added

Eco-system User Guide

Purpose
- To demonstrate to the user, the many use cases and how to interact with the FIO protocol
Manage Elements
- Content
  - Name - This is title of the User Guide
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Reference to the eco-system
      - Select and search for the partner to associated the user guide with OR
      - Create an eco-system partner from this view also
    - Rich Text
    - Description for heading subpage
    - Short Description
    - Icon
      - Feature Icon / Image
        250px X 250px png files

Image Added

Eco-system Video Guides

Purpose
- Video linking to demonstrate to the user, the many use cases and how to interact with the FIO protocol
Manage Elements
- Content
  - Name - This is title of the Video Guide
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Icon
    - Short description for ecosystem page
    - Reference in ecosystem
      - Select and search for the partner to associated the user guide with OR
    - YouTube video identifier

Image Added

People Behind FIO

Purpose
- To highlight all the people helping to manage and grow the FIO Protocol
Manage Elements
- Content
  - Name - This is title of the person
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Tag
      - Indicates person’s affiliation or role
    - X Link
      - Opens new tab for the user to access external details
    - LinkedIn Link
      - Opens new tab for the user to access external details
    - Photo
      - Design Assets
    - Section
      - Places the person in one of three main sections
        Board
        Committee
        Contributor
    - Order
      - Selects display order
    - Github Link

Image Added

Research and Education

Purpose
- To highlight real world application and coverage of the FIO protocol / token in the public eye
Manage Elements
- Content
  - Name - This is title of the tile
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Description
      - Provides short description within the tile
    - URL Link
      - Opens new tab for the user to access external details
    - Icon
      - Feature Icon / Image
        Max width 250px, max height 60px
      - Design Assets
    - Order
      - Selects display order

Image Added

Get Involved Tiles

Purpose
- To highlight how individuals can get involved with the FIO protocol
Manage Elements
- Content
  - Name - This is title of the role
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Icon
      - Feature Icon / Image
        125px X 125px png files
    - Content
      - Provides short description within the tile
    - Background Color
      - Add background hex color (brand colors)
        #765CD6
        #22A2FF
        #B65CD6
        #252525
    - Order
      - Selects display order

Image Added

Dashboard Tiles

Purpose
- To highlight the many different elements of the FIO app and it’s use
Manage Elements
- Content
  - Name - This is title of the tile
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Icon
      - Feature Icon / Image
        425px X 325px png files
    - Content
      - Provides short description within the tile
    - Background Color
      - Add background hex color (brand colors)
        #765CD6
        #22A2FF
        #B65CD6
        #252525
    - Order
      - Selects display order

Image Added

Integration Tiles

Purpose
- To highlight the many different integration opportunities of the FIO protocol
Manage Elements
- Content
  - Name - This is title of the tile
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Icon
      - Feature Icon / Image
        125px X 125px png files
    - Background Color
      - Add background hex color (brand colors)
        #765CD6
        #22A2FF
        #B65CD6
        #252525
    - CTA Text
    - CTA Link
      - Opens new tab for the user to access details
    - Description
      - Provides short description within the tile

Image Added

Differentiator Tiles

Purpose
- To highlight how the FIO protocol is different from other L1 protocols
Manage Elements
- Content
  - Name - This is title of the tile
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Icon
      - Feature Icon / Image
        125px X 125px png files
    - Description
      - Provides short description within the tile
    - CTA Link
      - Opens new tab for the user to access details
    - Background Color
      - Add background hex color (brand colors)
        #765CD6
        #22A2FF
        #B65CD6
        #252525
    - Flip Card Description

Image Added

Benefits Tiles

Purpose
- To highlight how the benefits of the FIO protocol is different from other L1 protocols
Manage Elements
- Content
  - Name - This is title of the tile
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Description
      - Provides short description within the tile
    - Icon
    - Description
    - CTA Link
    - Background Color
    - Flip Card Description
      - Feature Icon / Image
        75px X 75px png files

Image Added

Privacy Policies

Purpose
- Purpose
  To
  highlight how the FIO protocol is different from other L1 protocols
  allow the privacy policy content to be managed
Manage Elements
- Content
  - Name - This is title of the
    tile
    view
  - Slug - The slug is auto-generated based on the name
  - Custom Field
    - Icon
    - Description
    - CTA Link
    - Background Color

Versions Compared

Old Version 12

New Version Current

Key