feat(docs): docs landing page revamp (#1203)

Author: Shanugoyanka

.github/workflows/deploy-staging-revamp.yml

@@ -0,0 +1,55 @@
+name: Deploy Staging
+
+on:
+  push:
+    branches:
+      - feat/docs-revamps
+
+jobs:
+  build:
+    name: Build Images
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Gcloud Auth
+        uses: google-github-actions/auth@v1
+        with:
+          credentials_json: "${{ secrets.ORG_SANDBOX_DEPLOYMENT_KEY }}"
+
+      - name: Setup Cloud SDK
+        uses: google-github-actions/setup-gcloud@v1
+
+      - name: Set Image Tag
+        id: lookup
+        run: echo "version=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+
+      - run: |
+          gcloud auth list
+          gcloud auth configure-docker -q
+          echo "VERSION: ${{ steps.lookup.outputs.version }}"
+
+      - name: Build and Push Images
+        run: |
+          ./scripts/build-img-revamp.py
+        env:
+          IMAGE_REVAMP_REPOSITORY: ${{ secrets.IMAGE_REVAMP_REPOSITORY }}
+          BACKEND_URL: ${{ secrets.STAGING_NEXT_PUBLIC_BACKEND_URL }}
+          NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID: ${{ secrets.NEXT_PUBLIC_GOOGLE_ANALYTICS_TRACKING_ID }}
+          NEXT_PUBLIC_ALGOLIA_APP_ID: ${{ secrets.NEXT_PUBLIC_ALGOLIA_APP_ID }}
+          NEXT_PUBLIC_ALGOLIA_API_KEY: ${{ secrets.NEXT_PUBLIC_ALGOLIA_API_KEY }}
+          NEXT_PUBLIC_ALGOLIA_INDEX: ${{ secrets.NEXT_PUBLIC_ALGOLIA_INDEX }}
+          NEWSLETTER_BASE_URL: ${{ secrets.NEWSLETTER_BASE_URL }}
+          SENDER_TOKEN: ${{ secrets.SENDER_TOKEN }}
+
+      - name: Repository Dispatch
+        run: |
+          curl -f -H "Accept: application/vnd.github.everest-preview+json" \
+          -H "Authorization: token ${{ secrets.ORG_DISPATCH_RENDER_TOKEN }}" \
+          --request POST \
+          --data '{"event_type": "docs-revamp-staging-build", "client_payload": {"image": "'"${{ secrets.IMAGE_REVAMP_REPOSITORY }}"'" , "image_path": "values", "key_path": ".image.tag", "commit_message_service": "Docs Revamp Staging", "tag": "'"${{ steps.lookup.outputs.version }}"'"}}' \
+          https://api.github.com/repos/fetchai/infra-sandbox-london-b-deployment/dispatches

.github/workflows/deploy-staging.yml

@@ -3,7 +3,7 @@ name: Deploy Staging
 on:
   push:
     branches:
-      - main
+      - feat/new-landing
 
 jobs:
   build:

components/components.module.css

@@ -11,7 +11,7 @@
   cursor: pointer;
   width: 100%;
   color: #000d3d;
-  font-family: Lexend;
+  font-family: Geist;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -53,7 +53,7 @@
 
 .heading {
   color: var(--Cold-Grey-Grey500-Coolgrey, #8a9fb8);
-  font-family: Lexend;
+  font-family: Geist;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
@@ -87,7 +87,7 @@
 
 .dropdownActive {
   color: #0b1742;
-  font-family: Lexend;
+  font-family: Geist;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -107,7 +107,7 @@
   border-radius: 8px;
   border: 1px solid var(--Cold-Grey-Grey250, #d0d9e3);
   color: #0b1742;
-  font-family: Lexend;
+  font-family: Geist;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -177,7 +177,7 @@
   background: #e8ecf1;
   color: var(--Secondary-500, #556578);
   text-align: center;
-  font-family: Lexend;
+  font-family: Geist;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -186,7 +186,7 @@
 
 .mainTitleHeading {
   color: var(--Indigo-Indigo-900---Fetch-navy, #000d3d);
-  font-family: Lexend;
+  font-family: Geist;
   font-size: 24px;
   font-style: normal;
   font-weight: 400;

components/error-404.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useEffect } from "react";
 import Image from "next/image";
 import Error from "../src/svgs/desktop/404.svg";
-import { FeatureGuideTabs } from "./feature-guide-tabs";
 
 const Description = ({ children }: { children: ReactNode }) => (
   <span
@@ -42,14 +41,8 @@ const Error404 = () => {
               go back to the homepage or
             </span>
           </Description>
-          <Description>
-            The quick links below may help you find your way.
-          </Description>
         </div>
       </div>
-      <section className="nx-mt-landing-page-sections nx-max-w-[1216px]">
-        <FeatureGuideTabs centerMode={true} />
-      </section>
     </div>
   );
 };

components/feature-guide-tabs.tsx

@@ -146,6 +146,20 @@ export const FeatureGuideTabs = ({ centerMode }: { centerMode?: boolean }) => {
             "Set up Agentverse mailboxes for your locally-run agents and to run them independently of your constant presence to run the server.",
           path: "/guides/agentverse/utilising-the-mailbox",
         },
+        {
+          title:
+            "Agentverse Functions: register your Agent Functions on the Agentverse!",
+          description:
+            "Discover how to register and make discoverable Agents' Functions within the Agentverse and DeltaV!",
+          path: "/guides/agentverse/registering-agent-services",
+        },
+        {
+          title:
+            "Agentverse Functions: register a coin toss agent as a Function",
+          description:
+            "Create and make an coin toss Function discoverable on the Agentverse and DeltaV!",
+          path: "/guides/agentverse/registering-agent-coin-toss",
+        },
         {
           title: "Agentverse allowed imports",
           description:

components/footer.module.css

@@ -1,5 +1,5 @@
 .page {
-  max-width: 976px;
+  max-width: 1010px;
   margin: 48px auto;
   display: flex;
   flex-direction: column;
@@ -58,7 +58,7 @@
 
 .footerHeading {
   color: #0b1742;
-  font-family: Lexend;
+  font-family: Geist;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -81,7 +81,8 @@
   border-radius: 6px;
   border: 1px solid #b9c5d4;
   background: transparent;
-  width: 330px;
+  max-width: 592px;
+  width: 100%;
 }
 
 .inputInner {
@@ -137,28 +138,6 @@
   }
 }
 
-.footerInputSection {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  gap: 12px;
-  flex-direction: column;
-}
-
-.footerInputWrapper {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
-  gap: 12px;
-}
-
-@media (max-width: 502px) {
-  .footerInputWrapper {
-    flex-direction: column;
-    align-items: normal;
-  }
-}
-
 .footerInput {
   display: flex;
   flex-direction: column;
@@ -170,15 +149,22 @@
   display: flex;
   height: 50px;
   min-width: 40px;
-  min-height: 40px;
+  /* min-height: 40px; */
   padding: 8px 12px;
   justify-content: center;
   align-items: center;
   gap: 2px;
   border-radius: 8px;
-  background: #5f38fb;
+  background: #000;
   color: #ffff;
   align-items: center;
+  text-transform: uppercase;
+  width: 100px;
+  font-size: 14px;
+  font-family: "Geist Mono", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
 }
 .signBtn:hover {
   border-radius: 8px;