about page content

src/routes/About.tsx

@@ -1,79 +1,64 @@
 const About = () => {
+  const listItems = [
+    "Enhance Transparency and Maintain Standards: This public dashboard serves as a transparent platform, allowing us to showcase the performance of Fil+ tooling. In the event of bugs or service interruptions, any drop in activity will be clearly visible here.",
+    "Highlight Fil+ Notary App Throughput: We emphasize the throughput of the widely utilized Fil+ notary app, providing valuable insights into its efficiency and effectiveness.",
+    "Central Hub for Fil+ Notary Tooling Metrics: Our aim is to make this dashboard the central location for viewing metrics related to all the notary tooling developed by the Keyko team. This includes the Fil+ registry, SA Bot, and LDN bot.",
+    "Accountability and Transparency: We have built this website to hold ourselves accountable for the performance of our tooling while also promoting transparency about our ongoing development efforts.",
+    "Server Status Monitoring: This website also serves as a 'server status' page, enabling users to check if they can log in to the Fil+ app and sign applications without any issues.",
+    "Future Expansion: In the near future, we plan to emit and track events for other tooling functionalities, such as the SA bot and LDN bot, which are responsible for posting comments on LDN applications."
+  ];
+
   return (
     <div className="flex flex-col">
-      <div className="bg-gradient-to-r from-[#0091ff] to-[#39c1cb] h-[300px] text-white  flex items-center ">
+      <div className="bg-gradient-to-r from-filecoin-blue to-[#39c1cb] h-[300px] text-white  flex items-center ">
         <div className="container mx-auto font-bold text-3xl tracking-wide">
           About Fil+ Metrics
         </div>
       </div>
       <div className="bg-gray-100 min-h-screen">
         <div className="container mx-auto bg-white rounded-md shadow-lg -translate-y-16 p-5">
           <div>
-            <h4 className="text-xl font-semibold">About Fil+</h4>
-            <p className="pt-4 text-[15px]">
-              Filecoin Plus is a layer of social trust on top of the Filecoin
-              Network to help incentivize the storage of real data. Root
-              key-holders, notaries, clients, and storage providers, interact
-              through the allocation and spending of DataCap. You can read more
-              about the Fil+ program here.
-            </p>
+            <h4 className="text-xl font-semibold">
+              Welcome to the Metrics Dashboard!
+            </h4>
             <p className="pt-4 text-[15px]">
-              Clients looking to utilize storage on the network apply to receive
-              DataCap from Notaries, which can be used to incentivize storage
-              providers to make storage deals. Notaries are community-elected
-              trustees responsible for allocating DataCap to parties storing
-              useful data on the network. Storage Providers that receive DataCap
-              receive a 10x boost to their quality-adjusted power for the
-              storage space offered in that deal, which increases their block
-              reward share in the network. This creates a mechanism that
-              incentivizes all participants to make Filecoin more useful.
+              Over the last few months, we have been continuously improving our
+              Fil+ tooling and have exciting updates planned for the near
+              future. We believe that Fil+ tooling plays a critical role in the
+              Fil+ program, serving as the primary means for issuing datacap and
+              organizing LDN applications.
             </p>
             <p className="pt-4 text-[15px]">
-              The goal of this site is to provide metrics, insights, and audit
-              accountability tools for the Filecoin Plus community. You can see
-              health statistics of the overall program, along with tables of
-              data to track the interactions between the stakeholders (Notaries,
-              Clients, and Storage Providers). This site was created by Digital
-              M.O.B. in collaboration with Protocol Labs and the Filecoin
-              Foundation providing development grants.
+              Given the rapid development and significant changes on the
+              horizon, it is crucial to monitor the performance of our tooling.
+              The Keyko team has been dedicatedly working on this dashboard,
+              with a focus on measuring user experience metrics. Our dashboard
+              is designed to accomplish the following objectives:
             </p>
-          </div>
-          <div>
-            <h4 className="text-xl font-semibold pt-4">Dashboard:</h4>
-            <p className="pt-4 text-[15px]">
-              Filecoin Plus is a layer of social trust on top of the Filecoin
-              Network to help incentivize the storage of real data. Root
-              key-holders, notaries, clients, and storage providers, interact
-              through the allocation and spending of DataCap. You can read more
-              about the Fil+ program here.
-            </p>
-            <p className="pt-4 text-[15px]">
-              The goal of this site is to provide metrics, insights, and audit
-              accountability tools for the Filecoin Plus community. You can see
-              health statistics of the overall program, along with tables of
-              data to track the interactions between the stakeholders (Notaries,
-              Clients, and Storage Providers). This site was created by Digital
-              M.O.B. in collaboration with Protocol Labs and the Filecoin
-              Foundation providing development grants.
-            </p>
-          </div>
-          <div>
-            <h4 className="text-xl font-semibold pt-4">Blockchain:</h4>
+            <ol className="list-decimal list-inside pt-4 text-[15px]">
+              {listItems.map((item, index) => {
+                return (
+                  <li key={index} className="pt-4">
+                    {item}
+                  </li>
+                );
+              })}
+            </ol>
             <p className="pt-4 text-[15px]">
-              Filecoin Plus is a layer of social trust on top of the Filecoin
-              Network to help incentivize the storage of real data. Root
-              key-holders, notaries, clients, and storage providers, interact
-              through the allocation and spending of DataCap. You can read more
-              about the Fil+ program here.
+              If you have any questions or require further assistance, please
+              feel free to reach out to{" "}
+              <span className="font-semibold">@Philippe Pangestu </span> on the
+              FF Slack. Look at here for more details on this dashboard:
+              <a
+                href="https://medium.com/filecoin-plus/fil-notary-app-and-github-tooling-metrics-dashboard-v0-1-2012a9ed961f"
+                className="text-filecoin-blue pl-1 hover:text-gray-400"
+              >
+                https://medium.com/filecoin-plus/fil-notary-app-and-github-tooling-metrics-dashboard-v0-1-2012a9ed961f
+              </a>
             </p>
             <p className="pt-4 text-[15px]">
-              The goal of this site is to provide metrics, insights, and audit
-              accountability tools for the Filecoin Plus community. You can see
-              health statistics of the overall program, along with tables of
-              data to track the interactions between the stakeholders (Notaries,
-              Clients, and Storage Providers). This site was created by Digital
-              M.O.B. in collaboration with Protocol Labs and the Filecoin
-              Foundation providing development grants.
+              We value your feedback and look forward to continuously improving
+              our Fil+ tooling based on your needs.
             </p>
           </div>
         </div>

tailwind.config.js

@@ -5,7 +5,8 @@ export default {
     extend: {
       colors: {
         "chart-blue": "#2196F3",
-        "chart-orange": "#FF5722"
+        "chart-orange": "#FF5722",
+        "filecoin-blue": "#0091FF"
       }
     }
   },