api key banner

Author: davideast

src/app/pages/home/home.component.html

@@ -14,6 +14,10 @@
  limitations under the License.
 -->
 
+<div class="api-key-banner">
+  <p>Open <code>functions/.env</code> and add your Gemini API key.</p>
+</div>
+
 <header>
   <svg
     class="web"

src/app/pages/home/home.component.scss

@@ -122,3 +122,19 @@ header {
     }
   }
 }
+
+.api-key-banner {
+  position: absolute;
+  top: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  
+  & p {
+    padding: 16px;
+    background-color: var(--primary);
+    color: var(--background);
+    border-radius: 12px;
+    max-width: fit-content;
+  }
+}