Added hosting landing page (#67)

Co-authored-by: Shanu Goyanka <[email protected]>
fetchai · Aug 30, 2023 · b4a4a24 · b4a4a24
1 parent e5886c5
commit b4a4a24
Show file tree

Hide file tree

Showing 4 changed files with 237 additions and 32 deletions.
diff --git a/components/featureGuideTabs.tsx b/components/featureGuideTabs.tsx
@@ -2,8 +2,20 @@ import React, { useEffect, useState } from 'react';
 import styles from './tab.module.css'
 import { useRouter } from 'next/router';
 
+export const GuideBox = ({content}) => {
+  const router = useRouter()
+  const [hover, setHover] = useState<boolean>(false);
 
-const FeatureGuideTabs = () => {
+  return <section className={hover ? styles.hoverGuideBox : styles.guideBox}
+              onClick={() => {router.push(content.path)}}
+              onMouseOver={() => {setHover(true)}}
+              onMouseLeave={() => {setHover(false)}}>
+      <h3 className="nx-text-black nx-font-medium nx-mb-2 nx-text-lg">{content.title}</h3>
+      <p className="nx-text-gray-500 nx-font-normal">{content.description}</p>
+    </section>
+  } 
+
+export const FeatureGuideTabs = () => {
   const [activeTab, setActiveTab] = useState(0);
   const [isMobile, setIsMobile] = useState(false);
 
@@ -12,51 +24,64 @@ const FeatureGuideTabs = () => {
       label: 'Agents',
       content: [{
         title: 'Installing the uAgent framework',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
+
       },{
         title: 'Creating your first agent',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/create-a-uagent'
       },
       {
         title: 'How to use μAgents to verify messages',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/message-verification'
       },{
         title: 'Registering in the Almanac contract',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       },
       {
         title: 'Communicating with other agents',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       },{
         title: 'How to use the μAgents to simulate a cleaning scenario',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       }]
     },
     { 
       label: 'Hosting',
       content: [{
         title: 'Installing the uhosting framework',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       },{
         title: 'Creating your first hosting',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       },
       {
         title: 'Communicating with other hostings',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       },{
         title: 'How to use the μhostings to simulate a cleaning scenario',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       }]
     },
     { 
       label: 'Other',
       content: [{
         title: 'Installing other framework',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       },{
         title: 'Creating your first other featured guide for now',
-        description: 'Welcome back to another eagerly anticipated community update.'
+        description: 'Welcome back to another eagerly anticipated community update.',
+        path: 'guides/agents/installing-uagent'
       }]
     },
   ];
@@ -74,17 +99,7 @@ const FeatureGuideTabs = () => {
     };
   }, []);
 
-  const GuideBox = ({content}) => {
-    const router = useRouter()
-    const [hover, setHover] = useState<boolean>(false);
-
-    return <section className={hover ? styles.hoverGuideBox : styles.guideBox}
-                onMouseOver={() => {setHover(true)}}
-                onMouseLeave={() => {setHover(false)}}>
-        <h3 className="nx-text-black nx-font-medium nx-mb-2 nx-text-lg">{content.title}</h3>
-        <p className="nx-text-gray-500 nx-font-normal">{content.description}</p>
-      </section>
-    } 
+
 
   return (
     <div>
@@ -141,6 +156,4 @@ const FeatureGuideTabs = () => {
       </div>
     </div>
   );
-};
-
-export default FeatureGuideTabs;
+};
diff --git a/components/landing-page.tsx b/components/landing-page.tsx
@@ -5,7 +5,7 @@ import styles from './landing.module.css'
 import Image from 'next/image';
 import ColoredCirclesIcon from '../src/images/New search paradigms.png'
 import ColoredShapesIcon  from '../src/images/Create new business models.png'
-import FeatureGuideTabs from './featureGuideTabs';
+import { FeatureGuideTabs } from './featureGuideTabs';
 import Products from './products';
 import { useRouter } from 'next/navigation'
 

diff --git a/components/products.tsx b/components/products.tsx
@@ -90,8 +90,11 @@ const items: { [key: string]: Item[] } = {
 const IndexPage: React.FC = () => {
   return (
     <div className="nx-container nx-mx-auto nx-py-8">
-      {Object.entries(items).map(([heading, itemList]) => (
-        <><Section key={heading} heading={heading} items={itemList} /></>
+      {Object.entries(items).map(([heading, itemList], index) => (
+        <div key={heading}>
+          {index !== 0 && <div className="nx-mt-32 nx-mb-32 nx-border-t nx-border-gray-300" />}
+          <Section heading={heading} items={itemList} />
+        </div>
       ))}
     </div>
   );

diff --git a/pages/guides.mdx b/pages/guides.mdx
@@ -1,5 +1,194 @@
 # Guides
 
-## content for landing page of guides
+<div className="nx-text-fetch-content">
+  This is a placeholder incase we want to have a subtitle for a brief
+  description/intro text in article pages.
+</div>
 
-leave at root
+import { Row } from "../components/mdx";
+import { GuideBox } from "../components/featureGuideTabs";
+
+## Featured Guides
+
+<div className="nx-text-fetch-content">
+  Agents are lorem ipsum dolor sit amed consectatur
+</div>
+
+<Row>
+    <GuideBox
+        content={{
+            title: "Installing the uAgent framework",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent"
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Creating your first agent",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/create-a-uagent"
+        }}
+    />
+
+</Row>
+<Row>
+    <GuideBox
+        content={{
+            title: "How to use μAgents to verify messages",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/message-verification"
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Registering in the Almanac contract",
+            description:
+            "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent",
+        }}
+    />
+
+</Row>
+<Row>
+    <GuideBox
+        content={{
+            title: "Communicating with other agents",
+            description:
+            "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent",
+        }}
+    />
+    <GuideBox
+        content={{
+            title: "How to use the μAgents to simulate a cleaning scenario",
+            description:
+            "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent",
+        }}
+    />
+
+</Row>
+
+## Hosting
+
+<div className="nx-text-fetch-content">
+  Quick answers to set up your self-hosted server
+</div>
+
+<Row>
+    <GuideBox
+        content={{
+            title: "Installing the uAgent framework",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent"
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Creating your first agent",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/create-a-uagent"
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Creating your first agent",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/create-a-uagent"
+        }}
+    />
+
+</Row>
+<Row>
+    <GuideBox
+        content={{
+            title: "How to use μAgents to verify messages",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/message-verification"
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Registering in the Almanac contract",
+            description:
+            "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent",
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Creating your first agent",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/create-a-uagent"
+        }}
+    />
+
+</Row>
+<Row>
+    <GuideBox
+        content={{
+            title: "Communicating with other agents",
+            description:
+            "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent",
+        }}
+    />
+    <GuideBox
+        content={{
+            title: "How to use the μAgents to simulate a cleaning scenario",
+            description:
+            "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent",
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Creating your first agent",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/create-a-uagent"
+        }}
+    />
+
+</Row>
+
+## Agents
+
+<div className="nx-text-fetch-content">
+  Quick answers to set up your self-hosted server
+</div>
+
+<Row>
+    <GuideBox
+        content={{
+            title: "Installing the uAgent framework",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/installing-uagent"
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Creating your first agent",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/create-a-uagent"
+        }}
+    />
+
+    <GuideBox
+        content={{
+            title: "Creating your first agent",
+            description: "Welcome back to another eagerly anticipated community update.",
+            path: "guides/agents/create-a-uagent"
+        }}
+    />
+
+</Row>
+
+<div className="nx-mb-8"></div>