From 486f165574d2559f749ee6325a63c78961b0af0a Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Wed, 15 May 2024 16:55:31 -0400
Subject: [PATCH] add fontawesome + complete features seciton

---
 app.vue                 | 176 ++++++++++++++++++++--------------------
 assets/css/tailwind.css |   4 +
 package-lock.json       |  71 ++++++++++++++++
 package.json            |   5 ++
 4 files changed, 168 insertions(+), 88 deletions(-)

diff --git a/app.vue b/app.vue
index 9bea829..5c89b07 100644
--- a/app.vue
+++ b/app.vue
@@ -1,10 +1,26 @@
 <script setup lang="ts">
 import Button from "primevue/button";
-import Tag from 'primevue/tag';
+import Tag from "primevue/tag";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+  faListCheck,
+  faWandSparkles,
+  faGamepad,
+  faShieldHeart,
+  faRotate,
+  faWrench
+} from "@fortawesome/free-solid-svg-icons";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+
+function onGetStarted() {
+  window.open("https://github.com/rommapp/romm?tab=readme-ov-file#installation", "_blank");
+}
 </script>
 
 <template>
-  <nav class="sticky top-0 z-40 w-full backdrop-blur-lg backdrop-brightness-90 transition-colors border-b border-b-neutral-800">
+  <nav
+    class="sticky top-0 z-40 w-full backdrop-blur-lg backdrop-brightness-90 transition-colors border-b border-b-slate-800"
+  >
     <div class="flex justify-between items-center px-10 py-2">
       <div class="flex items-center">
         <img
@@ -15,21 +31,21 @@ import Tag from 'primevue/tag';
         <span class="text-900 text-2xl font-semibold ml-1">RomM</span>
         <Tag value="v3.1.0" severity="primary" class="ml-3 text-xs"></Tag>
       </div>
-      <div class="md:flex items-center"> 
-        <a href="#" class="text-900 hover:text-blue-500">Features</a>
-        <a href="#" class="text-900 hover:text-blue-500 ml-4">Pricing</a>
-        <a href="#" class="text-900 hover:text-blue-500 ml-4">Docs</a>
-        <a href="#" class="text-900 hover:text-blue-500 ml-4">Blog</a>
-        <a href="#" class="text-900 hover:text-blue-500 ml-4">Contact</a>
-        <span class="mx-4 text-neutral-800">|</span>
-        <a href="#" class="text-900 hover:text-blue-500">Github</a>
+      <div class="md:flex items-center">
+        <a href="#features" class="text-900 hover:text-blue-500">Features</a>
+        <a href="https://github.com/rommapp/romm/wiki" target="_blank"class="text-900 hover:text-blue-500 ml-6">Wiki</a>
+        <a href="mailto:romm@fastmail.com" class="text-900 hover:text-blue-500 ml-6">Contact</a>
+        <a href="https://github.com/rommapp/romm" target="_blank" class="text-900 hover:text-blue-500 border-l ml-6 pl-6 border-slate-800">
+          <FontAwesomeIcon :icon="faGithub" class="text-2xl" />
+        </a>
       </div>
       <div class="md:hidden">
         <i class="pi pi-bars text-2xl"></i>
       </div>
     </div>
   </nav>
-  <div class="md:grid grid-cols-2 pl-10">
+
+  <div class="md:grid grid-cols-2 pl-10 mb-20 bg-slate-950">
     <div class="text-center md:text-left flex items-center">
       <section>
         <span class="block text-6xl font-bold mb-1">
@@ -45,8 +61,7 @@ import Tag from 'primevue/tag';
           plays on emulators.
         </p>
 
-        <Button type="button" class="mr-3 p-button-raised">Get Started</Button>
-        <Button type="button" class="p-button-outlined">Live Demo</Button>
+        <Button type="button" class="mr-3 p-button-raised" v-on:click="onGetStarted">Install Now</Button>
       </section>
     </div>
     <div>
@@ -58,98 +73,83 @@ import Tag from 'primevue/tag';
     </div>
   </div>
 
-  <div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
-    <div class="mb-3 font-bold text-3xl">
-      <span class="text-900">One Product, </span>
-      <span class="text-blue-600">Many Solutions</span>
-    </div>
-    <div class="text-700 mb-6">
-      Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
+  <div
+    id="features"
+    class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center bg-slate-950"
+  >
+    <div class="text-700 mb-12 text-2xl">
+      The <span class="text-purple-500">most powerful</span> all-in-one app for
+      managing your game collection.
     </div>
     <div class="grid grid-cols-3 grid-rows-2">
-      <div class="mb-4 px-5">
-        <span
-          class="p-3 shadow-2 mb-3 inline-block surface-card"
-          style="border-radius: 10px"
-        >
-          <i class="pi pi-desktop text-4xl text-blue-500"></i>
+      <div class="mb-12 px-6">
+        <span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
+          <FontAwesomeIcon
+            :icon="faWandSparkles"
+            class="text-4xl text-purple-500"
+          />
         </span>
-        <div class="text-900 text-xl mb-3 font-medium">
-          Built for Developers
+        <div class="text-900 text-xl mb-3 font-medium">Magical metadata</div>
+        <div class="text-700 line-height-3 px-6">
+          Enrich your collection with cover art and detailed metadata from IGDB
+          and MobyGames.
         </div>
-        <span class="text-700 line-height-3"
-          >Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
-          dolore eu fugiat nulla pariatur.</span
-        >
       </div>
-      <div class="mb-4 px-5">
-        <span
-          class="p-3 shadow-2 mb-3 inline-block surface-card"
-          style="border-radius: 10px"
-        >
-          <i class="pi pi-lock text-4xl text-blue-500"></i>
+      <div class="mb-12 px-6">
+        <span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
+          <FontAwesomeIcon :icon="faListCheck" class="text-4xl text-purple-500" />
         </span>
         <div class="text-900 text-xl mb-3 font-medium">
-          End-to-End Encryption
+          Broad platform support
+        </div>
+        <div class="text-700 line-height-3 px-6">
+          Retro or modern, RomM has you covered with support for 400+ gaming platforms.
         </div>
-        <span class="text-700 line-height-3"
-          >Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin
-          aliquam ultrices sagittis.</span
-        >
       </div>
-      <div class="col-12 md:col-4 mb-4 px-5">
-        <span
-          class="p-3 shadow-2 mb-3 inline-block surface-card"
-          style="border-radius: 10px"
-        >
-          <i class="pi pi-check-circle text-4xl text-blue-500"></i>
+      <div class="mb-12 px-6">
+        <span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
+          <FontAwesomeIcon :icon="faGamepad" class="text-4xl text-purple-500" />
         </span>
-        <div class="text-900 text-xl mb-3 font-medium">Easy to Use</div>
-        <span class="text-700 line-height-3"
-          >Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat
-          ac tincidunt vitae semper.</span
-        >
+        <div class="text-900 text-xl mb-3 font-medium">Seamless gameplay</div>
+        <div class="text-700 line-height-3 px-6">
+          With EmulatorJS built-in, play your favorite games in your browser, no
+          setup required.
+        </div>
       </div>
-      <div class="col-12 md:col-4 mb-4 px-5">
-        <span
-          class="p-3 shadow-2 mb-3 inline-block surface-card"
-          style="border-radius: 10px"
-        >
-          <i class="pi pi-globe text-4xl text-blue-500"></i>
+      <div class="mb-12 px-6">
+        <span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
+          <FontAwesomeIcon :icon="faRotate" class="text-4xl text-purple-500" />
         </span>
-        <div class="text-900 text-xl mb-3 font-medium">
-          Fast & Global Support
+        <div class="text-900 text-xl mb-3 font-medium flex items-center justify-center">
+          <span>Device sync</span>
+          <Tag value="COMING SOON" severity="primary" class="text-xs whitespace-nowrap ml-2"></Tag>
+        </div>
+        <div class="text-700 line-height-3 px-6">
+          Sync your games, saves and emulator settings across your devices with ease.
         </div>
-        <span class="text-700 line-height-3"
-          >Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum
-          tellus.</span
-        >
       </div>
-      <div class="col-12 md:col-4 mb-4 px-5">
-        <span
-          class="p-3 shadow-2 mb-3 inline-block surface-card"
-          style="border-radius: 10px"
-        >
-          <i class="pi pi-github text-4xl text-blue-500"></i>
-        </span>
-        <div class="text-900 text-xl mb-3 font-medium">Open Source</div>
-        <span class="text-700 line-height-3"
-          >Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec
-          adipiscing tristique risus nec feugiat.
+      <div class="mb-12 px-6">
+        <span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
+          <FontAwesomeIcon :icon="faGithub" class="text-4xl text-purple-500" />
         </span>
+        <div class="text-900 text-xl mb-3 font-medium">Open source</div>
+        <div class="text-700 line-height-3 px-6">
+          Built by the community, for the community.<br />
+          Fully transparent and licensed under AGPL-3.0.
+        </div>
       </div>
-      <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
-        <span
-          class="p-3 shadow-2 mb-3 inline-block surface-card"
-          style="border-radius: 10px"
-        >
-          <i class="pi pi-shield text-4xl text-blue-500"></i>
+      <div class="mb-12 px-6">
+        <span class="p-3 shadow-2 mb-4 inline-block rounded-md bg-slate-900">
+          <FontAwesomeIcon
+            :icon="faShieldHeart"
+            class="text-4xl text-purple-500"
+          />
         </span>
-        <div class="text-900 text-xl mb-3 font-medium">Trusted Security</div>
-        <span class="text-700 line-height-3"
-          >Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus
-          aliquam eleifend.</span
-        >
+        <div class="text-900 text-xl mb-3 font-medium">Private and secure</div>
+        <div class="text-700 line-height-3 px-6">
+          Maintain total control of your data.<br />
+          Built with security in mind and regularly updated.
+        </div>
       </div>
     </div>
   </div>
diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index e10f1b8..64faa7f 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -6,3 +6,7 @@
   @tailwind utilities;
   @tailwind variants;
 }
+
+body {
+  background-color: rgb(2 6 23);
+}
diff --git a/package-lock.json b/package-lock.json
index 7a1c056..9d5dd42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,11 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.5.2",
+        "@fortawesome/free-brands-svg-icons": "^6.5.2",
+        "@fortawesome/free-regular-svg-icons": "^6.5.2",
+        "@fortawesome/free-solid-svg-icons": "^6.5.2",
+        "@fortawesome/vue-fontawesome": "^3.0.6",
         "primevue": "^3.52.0"
       },
       "devDependencies": {
@@ -1199,6 +1204,72 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
+      "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz",
+      "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
+      "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.6.tgz",
+      "integrity": "sha512-akrL7lTroyNpPkoHtvK2UpsMzJr6jXdHaQ0YdcwqDsB8jdwlpNHZYijpOUd9KJsARr+VB3WXY4EyObepqJ4ytQ==",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@iconify/types": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
diff --git a/package.json b/package.json
index de0c83e..5b8052c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,11 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
     "primevue": "^3.52.0"
   },
   "devDependencies": {