From 1ffee81cea3884d81bdc1504df96930208b68ad6 Mon Sep 17 00:00:00 2001
From: Soufiane Fariss <rev.fariss@gmail.com>
Date: Fri, 23 Aug 2024 17:13:43 +0200
Subject: [PATCH] introduce getting started step to explorer landing page

---
 .../src/components/DescriptionPanel.vue       | 30 ++++++++++++++-----
 web/explorer/src/components/MetadataPanel.vue |  4 +--
 web/explorer/src/components/UploadOptions.vue |  2 +-
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/web/explorer/src/components/DescriptionPanel.vue b/web/explorer/src/components/DescriptionPanel.vue
index ab57a0a6..f7009d78 100644
--- a/web/explorer/src/components/DescriptionPanel.vue
+++ b/web/explorer/src/components/DescriptionPanel.vue
@@ -12,19 +12,35 @@
                 used to search and display the rule matches in different viewing modes.
             </p>
         </div>
-        <div class="bg-blue-50 border-round p-3 text-center max-w-75rem">
-            <p class="text-900 text-sm m-0">
-                New to capa? Explore the
+        <div class="bg-blue-50 border-round p-3 pb-4 text-center max-w-75rem mt-4">
+            <p class="text-700 text-sm m-0">New to capa? Follow these quick steps to get started:</p>
+            <p class="text-700 text-sm mb-3"></p>
+            <ol class="text-left text-sm pl-4 mb-3">
+                <li class="mb-2">Install capa: <code>pip install flare-capa</code></li>
+                <li class="mb-2">Generate JSON output: <code>capa -j /path/to/file > result.json</code></li>
+                <li>Upload the JSON file here to explore the results</li>
+            </ol>
+            <p class="text-700 text-sm m-0">
+                For more detailed information, explore the
                 <a
                     href="https://github.com/mandiant/capa"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-blue-600 hover:text-blue-400"
+                    class="text-blue-600 hover:text-blue-800 transition-colors duration-200"
                 >
-                    capa GitHub repository
-                </a>
-                to learn how to generate analysis results.
+                    capa GitHub repository</a
+                >.
             </p>
         </div>
     </div>
 </template>
+
+<style scoped>
+/* highlight inline code */
+code {
+    background-color: #e2e8f0;
+    padding: 2px 4px;
+    border-radius: 4px;
+    font-family: monospace;
+}
+</style>
diff --git a/web/explorer/src/components/MetadataPanel.vue b/web/explorer/src/components/MetadataPanel.vue
index 3c87ec2f..504676c6 100644
--- a/web/explorer/src/components/MetadataPanel.vue
+++ b/web/explorer/src/components/MetadataPanel.vue
@@ -28,14 +28,14 @@
                 <span class="ml-2 mr-2 text-white-alpha-30"> • </span>
                 <span>{{ data.meta.analysis.arch === "i386" ? "i386" : data.meta.analysis.arch.toUpperCase() }}</span>
             </div>
-            <!-- Flavor • Extractor • CAPA Version • Timestamp -->
+            <!-- Flavor • Extractor • capa Version • Timestamp -->
             <div class="flex-wrap align-items-center text-sm m-0 line-height-3 text-white">
                 <span class="capitalize">
                     {{ flavor }} analysis with {{ data.meta.analysis.extractor.split(/(Feature)?Extractor/)[0] }}</span
                 >
                 <!--- Extractor (e.g., CapeExtractor -> Cape, GhidraFeatureExtractor -> Ghidra, ... etc) -->
                 <span class="mx-2 text-white-alpha-30"> • </span>
-                <span>CAPA v{{ data.meta.version }}</span>
+                <span>capa v{{ data.meta.version }}</span>
                 <span class="mx-2 text-white-alpha-30"> • </span>
                 <span>{{ new Date(data.meta.timestamp).toLocaleString() }}</span>
             </div>
diff --git a/web/explorer/src/components/UploadOptions.vue b/web/explorer/src/components/UploadOptions.vue
index 962cd320..f9ad6bf4 100644
--- a/web/explorer/src/components/UploadOptions.vue
+++ b/web/explorer/src/components/UploadOptions.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-wrap align-items-center justify-content-center gap-3">
+    <div class="flex flex-wrap align-items-center justify-content-center gap-3 mb-6">
         <div class="flex-grow-1 flex align-items-center justify-content-center">
             <FileUpload
                 mode="basic"