Use FontAwesome Pro

www/index.html

@@ -8,7 +8,7 @@
 <link rel="icon" href="assets/images/icons/logo.svg" />
 <link rel="manifest" href="manifest.json">
 <link rel="stylesheet" href="node_modules/framework7/css/framework7.bundle.min.css" />
-<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" />
+<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-pro/css/all.min.css" />
 <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css" />
 <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
 <link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.css" />

www/package.json

@@ -4,7 +4,7 @@
   "main": "index.html",
   "license": "MPL-2.0",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.12.1",
+    "@fortawesome/fontawesome-pro": "^5.13.0",
     "framework7": "^5.5.1",
     "framework7-icons": "^3.0.0",
     "jquery": "^3.4.1",

www/pages/tabs/ranking.html

@@ -2,8 +2,44 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
-<div class="list no-margin-top col-100 medium-80 large-50 elevation-tablet">
-    <ul>
-        <li>grfklg renkgjedn gkerth</li>
-    </ul>
+<div class="row">
+    <div class="col-100 medium-50 large-33">
+        <div class="card">
+            <div class="card-content row no-gap align-items-stretch">
+                <div class="col-25 small-20 display-flex justify-content-center align-items-center">
+                    <div style="font-size: 140%; color: rgba(76,175,80,0.8);">+230</div>
+                </div>
+                <div class="col-75 small-80 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
+                    <b>John Doe</b>
+                    <br />
+                    <div class="chip">
+                        <div class="chip-media bg-color-green">
+                            <i class="fas fa-comment-check"></i>
+                        </div>
+                        <div class="chip-label">Honest</div>
+                    </div>
+                    <div class="chip">
+                        <div class="chip-media bg-color-blue">
+                            <i class="fas fa-car-mechanic"></i>
+                        </div>
+                        <div class="chip-label">Auto Mechanic</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-100 medium-50 large-33">
+        <div class="card">
+            <div class="card-content row no-gap align-items-stretch">
+                <div class="col-25 small-20 display-flex justify-content-center align-items-center">
+                    <div style="font-size: 140%; color: rgba(76,175,80,0.8);">+230</div>
+                </div>
+                <div class="col-75 small-80 padding" style="border-left: 1px solid rgba(0,0,0,0.1);">
+                    <b>John Doe</b>
+                    <br />
+                    <span>Honest</span>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>