improve API landing page

This commit is contained in:
Pascal Fischer
2023-05-05 19:39:42 +02:00
parent 05cbda8cd8
commit affd499f41
12 changed files with 59 additions and 42 deletions

View File

@@ -7,23 +7,12 @@ const guides = [
name: 'Authentication',
description: 'Learn how to authenticate your API requests.',
},
{
href: '/pagination',
name: 'Pagination',
description: 'Understand how to work with paginated responses.',
},
{
href: '/errors',
name: 'Errors',
description:
'Read about the different types of errors returned by the API.',
},
{
href: '/webhooks',
name: 'Webhooks',
description:
'Learn how to programmatically configure webhooks for your app.',
},
]
export function Guides() {

View File

@@ -4,7 +4,7 @@ export function HeroPattern() {
return (
<div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
<div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
<div className="absolute inset-0 bg-gradient-to-r from-[#FFAC1C] to-[#FF5F15] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#FFAC1C]/30 dark:to-[#FF5F15]/30 dark:opacity-100">
<div className="absolute inset-0 bg-gradient-to-r from-[#FFAC1C] to-[#F28C28] opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-[#F28C28]/30 dark:to-[#FF7518]/30 dark:opacity-100">
<GridPattern
width={72}
height={56}

View File

@@ -3,26 +3,27 @@ import { Heading } from '@/components/Heading'
const howToGuides = [
{
href: '/docs/getting-started',
name: 'Getting Started',
description: 'Learn how to start using NetBird.',
href: '/docs/managing-your-network#add-users-to-your-network',
name: 'Add Users to your network',
description: 'Learn how to add users to your network.',
},
{
href: '/docs/managing-your-network',
name: 'Managing your Network',
description: 'Learn everything you need to know about managing your network.',
},
{
href: '/docs/examples',
name: 'Examples',
href: '/docs/managing-your-network#configure-periodic-user-authentication',
name: 'Configure periodic user authentication',
description:
'Read some examples of how to use NetBird.',
'Learn how to configure periodic user authentication.',
},
{
href: '/docs/cli',
name: 'CLI',
href: '/docs/managing-your-network#manage-dns-in-your-network',
name: 'DNS',
description:
'Learn how to use the CLI of the NetBird client.',
'Learn how to configure DNS servers for your network.',
},
{
href: '/docs/managing-your-network#monitor-system-and-network-activity',
name: 'Monitoring system and network activities',
description:
'Learn how to keep track of system and network activities in your account.',
},
]

View File

@@ -13,7 +13,7 @@ const resources = [
href: '/accounts',
name: 'Accounts',
description:
'Learn about the contact model and how to create, retrieve, update, delete, and list contacts.',
'Learn how to list and update accounts.',
icon: UserIcon,
pattern: {
y: 16,
@@ -27,7 +27,21 @@ const resources = [
href: '/users',
name: 'Users',
description:
'Learn about the conversation model and how to create, retrieve, update, delete, and list conversations.',
'Learn how to create, update, delete, and list users.',
icon: ChatBubbleIcon,
pattern: {
y: -6,
squares: [
[-1, 2],
[1, 3],
],
},
},
{
href: '/tokens',
name: 'Tokens',
description:
'Learn how to create, retrieve, delete, and list tokens.',
icon: ChatBubbleIcon,
pattern: {
y: -6,
@@ -41,7 +55,7 @@ const resources = [
href: '/peers',
name: 'Peers',
description:
'Learn about the message model and how to create, retrieve, update, delete, and list messages.',
'Learn how to retrieve, update, delete, and list peers.',
icon: EnvelopeIcon,
pattern: {
y: 32,
@@ -55,7 +69,7 @@ const resources = [
href: '/setup-keys',
name: 'Setup Keys',
description:
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
'Learn how to create, retrieve, update, and list setup keys.',
icon: UsersIcon,
pattern: {
y: 22,
@@ -66,7 +80,7 @@ const resources = [
href: '/groups',
name: 'Groups',
description:
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
'Learn how to create, retrieve, update, delete, and list groups.',
icon: UsersIcon,
pattern: {
y: 22,
@@ -77,7 +91,7 @@ const resources = [
href: '/rules',
name: 'rules',
description:
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
'Learn how to create, retrieve, update, delete, and list rules.',
icon: UsersIcon,
pattern: {
y: 22,
@@ -88,7 +102,7 @@ const resources = [
href: '/policies',
name: 'Policies',
description:
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
'Learn how to create, retrieve, update, delete, and list policies.',
icon: UsersIcon,
pattern: {
y: 22,
@@ -99,7 +113,7 @@ const resources = [
href: '/routes',
name: 'Routes',
description:
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
'Learn about how to create, retrieve, update, delete, and list routes.',
icon: UsersIcon,
pattern: {
y: 22,
@@ -110,7 +124,7 @@ const resources = [
href: '/dns',
name: 'DNS',
description:
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
'Learn about how to create, retrieve, update, delete, and list nameserver groups and update and retrieve DNS settings.',
icon: UsersIcon,
pattern: {
y: 22,
@@ -121,7 +135,7 @@ const resources = [
href: '/events',
name: 'Events',
description:
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
'Learn about how to list events.',
icon: UsersIcon,
pattern: {
y: 22,