Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added hosting landing page #67

Merged
merged 2 commits into from
Aug 30, 2023
Merged

Added hosting landing page #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bfce816
Added hosting landing page
shanu-gl Aug 29, 2023
d5c3a20
Added some more styling to it
shanu-gl Aug 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 40 additions & 27 deletions components/featureGuideTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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'
}]
},
];
Expand All @@ -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>
Expand Down Expand Up @@ -141,6 +156,4 @@ const FeatureGuideTabs = () => {
</div>
</div>
);
};

export default FeatureGuideTabs;
};
2 changes: 1 addition & 1 deletion components/landing-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down
7 changes: 5 additions & 2 deletions components/products.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
193 changes: 191 additions & 2 deletions pages/guides.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>