From b93271cffc751806b6def7717c6c3196d1d2e5a0 Mon Sep 17 00:00:00 2001 From: Owen Date: Mon, 18 Nov 2024 10:43:55 -0500 Subject: [PATCH] initial pass (#1939) --- app/(home)/layout.tsx | 2 +- app/(home)/page.client.tsx | 232 +++++++++++++++++++++++++----------- app/(home)/page.tsx | 12 +- app/integrations/layout.tsx | 4 +- app/layout.client.tsx | 6 +- app/layout.config.tsx | 23 +++- 6 files changed, 198 insertions(+), 81 deletions(-) diff --git a/app/(home)/layout.tsx b/app/(home)/layout.tsx index ec1215866d9..0b07f9f998a 100644 --- a/app/(home)/layout.tsx +++ b/app/(home)/layout.tsx @@ -1,4 +1,4 @@ -import { Layout } from 'fumadocs-ui/layout'; +import { Layout, DocsLayout } from 'fumadocs-ui/layout'; import type { ReactNode } from 'react'; import { Footer } from '@/components/footer'; import { homebaseOptions } from '@/app/layout.config'; diff --git a/app/(home)/page.client.tsx b/app/(home)/page.client.tsx index 23f94f9b6e6..868353d2bd1 100644 --- a/app/(home)/page.client.tsx +++ b/app/(home)/page.client.tsx @@ -5,9 +5,8 @@ import React, { Fragment, type ReactElement, } from 'react'; -import { IndentDecrease, Layers, MailIcon, MonitorCheck, Settings, SproutIcon, SquareGanttChart, TerminalIcon, Webhook, HomeIcon, FolderCode, BadgeDollarSign, CpuIcon, Files, Folder, Globe, Link, SquareIcon, ArrowLeftRight, Coins, SquareCode, SquareStackIcon, Triangle, ChevronDownIcon, Pyramid } from 'lucide-react'; +import { IndentDecrease, Layers, MailIcon, MonitorCheck, Settings, SproutIcon, SquareGanttChart, TerminalIcon, Webhook, HomeIcon, FolderCode, BadgeDollarSign, CpuIcon, Files, Folder, Globe, Link, SquareIcon, ArrowLeftRight, Coins, SquareCode, SquareStackIcon, Triangle, ChevronDownIcon, Pyramid, HandCoins, Server, Code, TrendingUp, ScanFace, Telescope, LayoutTemplate, Building2, BookOpen, Podcast, Wallet } from 'lucide-react'; import { RootToggle } from 'fumadocs-ui/components/layout/root-toggle'; -import { Menu, Transition } from '@headlessui/react' export function DeployBlockchainAnimation(): React.ReactElement { @@ -106,11 +105,10 @@ export function HamburgerMenu(): React.ReactElement { , - url: '/', - + url: '', }, { title: 'Avalanche Protocol', @@ -182,70 +180,168 @@ interface AcademyDropdownProps { width?: string } -const options: Option[] = [ - { - title: 'Academy', - description: '', - icon: <>, - url: '/', - }, - { - title: 'Blockchain Fundamentals', - description: 'Understand fundamental blockchain concepts.', - icon: , - url: 'https://academy.avax.network/course/blockchain-fundamentals', - }, - { - title: 'Avalanche Fundamentals', - description: 'Overview of Avalanche Consensus, L1s, and VMs.', - icon: , - url: 'https://academy.avax.network/course/avalanche-fundamentals', - }, - { - title: "Multi-Chain Architecture", - description: 'Deploy your own blockchain with multi-chain architecture.', - icon: , - url: 'https://academy.avax.network/course/multi-chain-architecture', - }, - { - title: "Interchain Messaging", - description: 'Build cross-chain dApps on Avalanche.', - icon: , - url: 'https://academy.avax.network/course/interchain-messaging', - }, - { - title: "Interchain Token Transfer", - description: 'Transfer assets between Avalanche blockchains.', - icon: , - url: 'https://academy.avax.network/course/interchain-token-transfer', - }, - { - title: "Customizing the EVM", - description: 'Add custom precompiles to the EVM.', - icon: , - url: 'https://academy.avax.network/course/customizing-evm', - }, - { - title: "Layer 1 Tokenomics", - description: 'Design tokenomics for your Avalanche L1.', - icon: , - url: 'https://academy.avax.network/course/l1-tokenomics', - }, - { - title: "AvaCloud APIs", - description: 'Use AvaCloud APIs to build web apps.', - icon: , - url: 'https://academy.avax.network/course/avacloudapis', - }, - { - title: "HyperSDK", - description: 'Build high-performance blockchains with HyperSDK.', - icon: , - url: 'https://academy.avax.network/course/hypersdk', - } -] - export function AcademyDropdown({ width = 'w-72' }: AcademyDropdownProps) { + const options: Option[] = [ + { + title: 'Courses', + description: '', + icon: <>, + url: '', + }, + { + title: 'Blockchain Fundamentals', + description: 'Understand fundamental blockchain concepts.', + icon: , + url: 'https://academy.avax.network/course/blockchain-fundamentals', + }, + { + title: 'Avalanche Fundamentals', + description: 'Overview of Avalanche Consensus, L1s, and VMs.', + icon: , + url: 'https://academy.avax.network/course/avalanche-fundamentals', + }, + { + title: "Multi-Chain Architecture", + description: 'Deploy your own blockchain with multi-chain architecture.', + icon: , + url: 'https://academy.avax.network/course/multi-chain-architecture', + }, + { + title: "Interchain Messaging", + description: 'Build cross-chain dApps on Avalanche.', + icon: , + url: 'https://academy.avax.network/course/interchain-messaging', + }, + { + title: "Interchain Token Transfer", + description: 'Transfer assets between Avalanche blockchains.', + icon: , + url: 'https://academy.avax.network/course/interchain-token-transfer', + }, + { + title: "Customizing the EVM", + description: 'Add custom precompiles to the EVM.', + icon: , + url: 'https://academy.avax.network/course/customizing-evm', + }, + { + title: "Layer 1 Tokenomics", + description: 'Design tokenomics for your Avalanche L1.', + icon: , + url: 'https://academy.avax.network/course/l1-tokenomics', + }, + { + title: "AvaCloud APIs", + description: 'Use AvaCloud APIs to build web apps.', + icon: , + url: 'https://academy.avax.network/course/avacloudapis', + }, + { + title: "HyperSDK", + description: 'Build high-performance blockchains with HyperSDK.', + icon: , + url: 'https://academy.avax.network/course/hypersdk', + } + ]; + return ( + + ) +} + + + +export function GrantsDropdown() { + const options: Option[] = [ + { + title: 'Grants & Programs', + description: '', + icon: <>, + url: '', + }, + { + title: 'Retro9000', + description: 'Build publicly and get rewarded.', + icon: , + url: 'https://www.avax.network/retro9000', + }, + { + title: 'infraBUIDL()', + description: 'Infrastructure projects that enhance user and developer experience', + icon: , + url: 'https://www.avax.network/infrabuidl-program', + }, + { + title: 'Codebase', + description: 'Transforming ambitious builders into extraordinary founders', + icon: , + url: 'https://codebase.avax.network/', + }, + { + title: 'Blizzard Fund', + description: 'VC fund investing in innovative entrepreneurs driving growth on Avalanche', + icon: , + url: 'https://www.blizzard.fund/', + }, + + ]; + return ( + + ) +} + + +export function IntegrationsDropdown() { + const options: Option[] = [ + { + title: 'Integrations', + description: '', + icon: <>, + url: '/integrations', + }, + { + title: 'Account Abstraction', + description: "", + icon: , + url: '/integrations#Account%20Abstraction', + }, + { + title: 'Block Explorers', + description: "", + icon: , + url: '/integrations#Block%20Explorers', + }, + { + title: 'Blockchain as a Service', + description: "", + icon: , + url: '/integrations#Blockchain%20as%20a%20Service', + }, + { + title: 'Enterprise Solutions', + description: "", + icon: , + url: '/integrations#Enterprise%20Solutions', + }, + { + title: 'Indexers', + description: "", + icon: , + url: '/integrations#Indexers', + }, + { + title: 'Oracles', + description: "", + icon: , + url: '/integrations#Oracles', + }, + { + title: 'Wallets', + description: "", + icon: , + url: '/integrations#Wallet%20SDKs', + }, + + ]; return ( ) diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx index 137dc9cb2b9..01d171581e7 100644 --- a/app/(home)/page.tsx +++ b/app/(home)/page.tsx @@ -3,7 +3,7 @@ import type { LucideIcon } from 'lucide-react'; import { CpuIcon, BadgeDollarSign, - Globe, MailIcon, SproutIcon, SquareGanttChart, IndentDecrease, Layers, MonitorCheck, Settings, Terminal, Cable, Webhook, ArrowUpRight, Command + Globe, MailIcon, SproutIcon, SquareGanttChart, IndentDecrease, Layers, MonitorCheck, Settings, Terminal, Cable, Webhook, ArrowUpRight, Command, } from 'lucide-react'; import Link from 'next/link'; import type { HTMLAttributes, ReactNode } from 'react'; @@ -12,6 +12,7 @@ import { CodeBlock } from '@/components/code-block'; import { File, Files, Folder } from 'fumadocs-ui/components/files'; import { DeployBlockchainAnimation } from './page.client'; + const badgeVariants = cva( 'mb-2 inline-flex size-7 items-center justify-center rounded-full bg-fd-primary font-medium text-fd-primary-foreground', ); @@ -268,4 +269,11 @@ function Feature({ {props.children} ); -} \ No newline at end of file +} + +interface Option { + title: string + description: string + icon: React.ReactNode + url: string +} diff --git a/app/integrations/layout.tsx b/app/integrations/layout.tsx index a15489ac1ff..e3f5536e868 100644 --- a/app/integrations/layout.tsx +++ b/app/integrations/layout.tsx @@ -1,14 +1,14 @@ import { Layout } from 'fumadocs-ui/layout'; import type { ReactNode } from 'react'; import { Footer } from '@/components/footer'; -import { baseOptions } from '@/app/layout.config'; +import { integrationPageOptions } from '@/app/layout.config'; export default function HomeLayout({ children, }: { children: ReactNode; }): React.ReactElement { - return + return {children}