Skip to content

Commit f9de945

Browse files
martineckardtmartineckardt
committed
Clean up landing pages
1 parent 0c4a687 commit f9de945

File tree

2 files changed

+91
-119
lines changed

2 files changed

+91
-119
lines changed

‎app/(home)/docs/page.tsx

+91-89
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,10 @@ import type { LucideIcon } from 'lucide-react';
33
import {
44
CpuIcon,
55
BadgeDollarSign,
6-
Globe, SproutIcon, SquareGanttChart, MonitorCog, Atom, Logs, MonitorCheck, Settings, Terminal, Cable, Webhook, Github
6+
Globe, SproutIcon, SquareGanttChart, MonitorCog, Atom, Logs, MonitorCheck, Settings, Terminal, Cable, Webhook, Github,
7+
Wrench,
8+
GraduationCap,
9+
Rocket
710
} from 'lucide-react';
811
import Link from 'next/link';
912
import type { HTMLAttributes, ReactNode } from 'react';
@@ -20,14 +23,10 @@ export default function HomePage(): React.ReactElement {
2023
return (
2124
<>
2225
<main className="container relative max-w-[1100px] px-2 py-4 lg:py-16">
23-
<div className="flex justify-between items-center mb-8">
24-
<h1 className="text-3xl font-bold">Documentation</h1>
25-
</div>
2626
<div>
2727
<div className="relative">
2828
<Hero />
2929
</div>
30-
<Introduction />
3130
<Highlights />
3231
<Features />
3332
</div>
@@ -39,24 +38,25 @@ export default function HomePage(): React.ReactElement {
3938
function Highlights(): React.ReactElement {
4039
return (
4140
<div className="grid grid-cols-1 border-r md:grid-cols-2 lg:grid-cols-3">
42-
<Highlight icon={SproutIcon} heading="Quick Start" link="/docs/quick-start">
41+
<Highlight icon={GraduationCap} heading="Learn the Fundamentals" link="/academy/avalanche-fundamentals">
4342
Learn about the Avalanche Protocol and it's groundbreaking consensus algorithm.
4443
</Highlight>
45-
<Highlight icon={SquareGanttChart} heading="Build Applications" link="/docs/dapps">
46-
Your one stop shop to deploy smart contracts on the Avalanche C-Chain.
47-
</Highlight>
4844
<Highlight icon={Logs} heading="Avalanche L1s" link="/docs/avalanche-l1s">
4945
Utilize the Avalanche tech stack to build your own layer 1 blockchain.
5046
</Highlight>
47+
<Highlight icon={Cable} heading="Interoperability" link="/docs/cross-chain">
48+
Advanced interoperability protocols to communicate with other blockchains.
49+
</Highlight>
50+
<Highlight icon={SquareGanttChart} heading="Build Applications" link="/docs/dapps">
51+
Your one stop shop to deploy smart contracts on the Avalanche C-Chain.
52+
</Highlight>
5153
<Highlight icon={MonitorCog} heading="Virtual Machines" link="/docs/virtual-machines">
5254
Learn how to customize the EVM or build new virtual machines from scratch.
5355
</Highlight>
5456
<Highlight icon={MonitorCheck} heading="Nodes & Validators" link="/docs/nodes">
5557
Become an active participant in the network by running a node or validator.
5658
</Highlight>
57-
<Highlight icon={Cable} heading="Interoperability" link="/docs/cross-chain">
58-
Advanced interoperability protocols to communicate with other blockchains.
59-
</Highlight>
59+
6060
</div>
6161
);
6262
}
@@ -73,15 +73,15 @@ function Highlight({
7373
children: ReactNode;
7474
}): React.ReactElement {
7575
return (
76-
<a href={link}>
77-
<div className="border-l border-t px-6 py-12 hover:bg-fd-accent">
78-
<div className="mb-4 flex flex-row items-center gap-2 text-fd-muted-foreground">
79-
<Icon className="size-4" />
80-
<h2 className="text-sm font-medium">{heading}</h2>
76+
<a href={link}>
77+
<div className="border-l border-t px-6 py-12 hover:bg-fd-accent">
78+
<div className="mb-4 flex flex-row items-center gap-2 text-fd-muted-foreground">
79+
<Icon className="size-4" />
80+
<h2 className="text-sm font-medium">{heading}</h2>
81+
</div>
82+
<span className="font-medium">{children}</span>
8183
</div>
82-
<span className="font-medium">{children}</span>
83-
</div>
84-
</a>
84+
</a>
8585
);
8686
}
8787

@@ -98,88 +98,38 @@ function Hero(): React.ReactElement {
9898
);
9999
}
100100

101-
function Introduction(): React.ReactElement {
102-
return (
103-
<div className="grid grid-cols-1 border-r md:grid-cols-2">
104-
<div className="flex flex-col border-l border-t px-6 py-12 md:py-16">
105-
<div className={cn(badgeVariants(), 'bg-red-500', 'text-white')}>1</div>
106-
<h3 className="text-xl font-bold">Configure.</h3>
107-
<p className="mb-8 text-fd-muted-foreground">
108-
Configure your blockchain using Avalanche CLI.
109-
</p>
110-
<div className="relative flex flex-col">
111-
<CodeBlock
112-
lang="bash"
113-
wrapper={{ className: 'absolute inset-x-2 top-0' }}
114-
code="avalanche blockchain create myblockchain"
115-
/>
116-
<div className="relative mt-20">
117-
<Link href="https://build.avax.network/academy">
118-
<img
119-
src="/wolfie.png"
120-
alt="Avalanche Logo"
121-
className="absolute top-5 left-1/2 -translate-x-1/2 z-[1] w-32 h-32 object-contain transition-all duration-300 ease-in-out group-[.closed]:translate-y-[20px] group-[.closed]:opacity-50 group-[.open]:translate-y-10 group-[.open]:opacity-0"
122-
/>
123-
</Link>
124-
<Files className="z-[2] shadow-xl hide-icons relative dark:text-white group transition-all duration-300 ease-in-out [&[open]]:open [&:not([open])]:closed">
125-
<Folder name="Using the above command, you can configure your:" defaultOpen>
126-
<Link href="/docs/virtual-machines">
127-
<File icon={<CpuIcon />} name="Virtual Machine" />
128-
</Link>
129-
<Link href="/docs/tooling/create-avalanche-l1#enter-your-avalanche-l1s-chainid">
130-
<File icon={<Globe />} name="Chain ID" />
131-
</Link>
132-
<Link href="/docs/tooling/create-avalanche-l1#token-symbol">
133-
<File icon={<BadgeDollarSign />} name="Token Name & Symbol" />
134-
</Link>
135-
</Folder>
136-
</Files>
137-
</div>
138-
</div>
139-
</div>
140-
<div className="flex flex-col border-l border-t px-6 py-12 md:py-16">
141-
<div className={cn(badgeVariants(), 'bg-red-500', 'text-white')}>2</div>
142-
<h3 className="text-xl font-bold">Deploy.</h3>
143-
<p className="mb-8 text-fd-muted-foreground">
144-
Deploy an interoperable layer 1 with a single command.
145-
</p>
146-
<DeployBlockchainAnimation />
147-
</div>
148-
</div>
149-
)
150-
}
151101

152102
function Features(): React.ReactElement {
153103
return (
154104
<div className="grid grid-cols-1 border-b border-r md:grid-cols-2">
155105
<Feature
156106
icon={Settings}
157-
subheading="Toolings"
107+
subheading="Tooling"
158108
heading="Tools For Developers."
159109
description="We provide a suite of tools to make your development experience as smooth as possible."
160110
>
161-
<div className="mt-8 flex flex-col gap-4">
162-
<Link href="/docs/tooling/get-avalanche-cli" className="rounded-xl border bg-fd-background p-4 shadow-lg transition-colors hover:bg-fd-accent">
163-
<Terminal />
164-
<h3 className="font-semibold">Avalanche CLI</h3>
111+
<div className="mt-8 flex flex-col gap-4">
112+
<Link href="/tools/l1-launcher" className="rounded-xl border bg-fd-background p-4 shadow-lg transition-colors hover:bg-fd-accent">
113+
<Rocket />
114+
<h3 className="font-semibold">L1 Launcher</h3>
115+
<p className="text-sm text-fd-muted-foreground">
116+
Launch your EVM L1 with Docker and Core Wallet.
117+
</p>
118+
</Link>
119+
<Link href="/tools/l1-toolbox" className="rounded-xl border bg-fd-background p-4 shadow-lg transition-colors hover:bg-fd-accent">
120+
<Wrench />
121+
<h3 className="font-semibold">L1 Toolbox</h3>
165122
<p className="text-sm text-fd-muted-foreground">
166-
Command line interface for everything Avalanche.
123+
Simple atomic tools to launch and maintain your L1.
167124
</p>
168-
</Link>
169-
<Link href="https://github.com/ava-labs/avalanche-starter-kit" className="rounded-xl border bg-fd-background p-4 shadow-lg transition-colors hover:bg-fd-accent">
170-
<Github />
171-
<h3 className="font-semibold">Avalanche Starter Kit</h3>
172-
<p className="text-sm text-fd-muted-foreground">
173-
Quickstart your journey into Avalanche with our Starter Kit.
174-
</p>
175-
</Link>
176-
<Link href="https://github.com/ava-labs/hypersdk" className="rounded-xl border bg-fd-background p-4 shadow-lg transition-colors hover:bg-fd-accent">
177-
<Atom />
178-
<h3 className="font-semibold">HyperSDK</h3>
125+
</Link>
126+
<Link href="https://github.com/ava-labs/avalanche-starter-kit" className="rounded-xl border bg-fd-background p-4 shadow-lg transition-colors hover:bg-fd-accent">
127+
<Github />
128+
<h3 className="font-semibold">Avalanche Starter Kit</h3>
179129
<p className="text-sm text-fd-muted-foreground">
180-
High performance, customizable framework for building blockchains.
130+
Quickstart your journey into Avalanche with our Starter Kit.
181131
</p>
182-
</Link>
132+
</Link>
183133
</div>
184134
</Feature>
185135
<Feature
@@ -260,3 +210,55 @@ function Feature({
260210
</div>
261211
);
262212
}
213+
214+
215+
function Introduction(): React.ReactElement {
216+
return (
217+
<div className="grid grid-cols-1 border-r md:grid-cols-2">
218+
<div className="flex flex-col border-l border-t px-6 py-12 md:py-16">
219+
<div className={cn(badgeVariants(), 'bg-red-500', 'text-white')}>1</div>
220+
<h3 className="text-xl font-bold">Configure.</h3>
221+
<p className="mb-8 text-fd-muted-foreground">
222+
Configure your blockchain using Avalanche CLI.
223+
</p>
224+
<div className="relative flex flex-col">
225+
<CodeBlock
226+
lang="bash"
227+
wrapper={{ className: 'absolute inset-x-2 top-0' }}
228+
code="avalanche blockchain create myblockchain"
229+
/>
230+
<div className="relative mt-20">
231+
<Link href="https://build.avax.network/academy">
232+
<img
233+
src="/wolfie.png"
234+
alt="Avalanche Logo"
235+
className="absolute top-5 left-1/2 -translate-x-1/2 z-[1] w-32 h-32 object-contain transition-all duration-300 ease-in-out group-[.closed]:translate-y-[20px] group-[.closed]:opacity-50 group-[.open]:translate-y-10 group-[.open]:opacity-0"
236+
/>
237+
</Link>
238+
<Files className="z-[2] shadow-xl hide-icons relative dark:text-white group transition-all duration-300 ease-in-out [&[open]]:open [&:not([open])]:closed">
239+
<Folder name="Using the above command, you can configure your:" defaultOpen>
240+
<Link href="/docs/virtual-machines">
241+
<File icon={<CpuIcon />} name="Virtual Machine" />
242+
</Link>
243+
<Link href="/docs/tooling/create-avalanche-l1#enter-your-avalanche-l1s-chainid">
244+
<File icon={<Globe />} name="Chain ID" />
245+
</Link>
246+
<Link href="/docs/tooling/create-avalanche-l1#token-symbol">
247+
<File icon={<BadgeDollarSign />} name="Token Name & Symbol" />
248+
</Link>
249+
</Folder>
250+
</Files>
251+
</div>
252+
</div>
253+
</div>
254+
<div className="flex flex-col border-l border-t px-6 py-12 md:py-16">
255+
<div className={cn(badgeVariants(), 'bg-red-500', 'text-white')}>2</div>
256+
<h3 className="text-xl font-bold">Deploy.</h3>
257+
<p className="mb-8 text-fd-muted-foreground">
258+
Deploy an interoperable layer 1 with a single command.
259+
</p>
260+
<DeployBlockchainAnimation />
261+
</div>
262+
</div>
263+
)
264+
}

‎components/landing/hero.tsx

-30
Original file line numberDiff line numberDiff line change
@@ -33,36 +33,6 @@ export default function Hero() {
3333
<p className="text-zinc-800 dark:text-zinc-300 mt-3 tracking-tight text-xl md:text-2xl lg:text-3xl px-4 md:px-0">
3434
Build your Fast & Interoperable Layer 1 Blockchain with Avalanche.
3535
</p>
36-
37-
<div className="relative mt-4 hidden md:flex items-center gap-2 w-10/12 mx-auto lg:mx-0">
38-
<GradientBG className="w-full flex items-center justify-between">
39-
<div className="w-full flex items-center gap-2">
40-
<p className="text-xs md:text-sm font-mono select-none">
41-
<span>
42-
<span className="text-[#4498c8]">avalanche </span>
43-
<span className="text-[#F07178]">blockchain </span>
44-
</span>
45-
</p>
46-
<p className="relative inline tracking-tight opacity-90 text-xs md:text-sm dark:text-white font-mono text-black">
47-
create{" "}
48-
<span className="relative dark:text-fuchsia-100 text-fuchsia-950">
49-
myblockchain
50-
<span className="absolute h-2 bg-gradient-to-tr from-white via-stone-200 to-stone-300 blur-3xl w-full top-0 left-2"></span>
51-
</span>
52-
</p>
53-
</div>
54-
<div className="flex gap-2 items-center">
55-
<Link href="https://github.com/ava-labs" target="_blank">
56-
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256">
57-
<g fill="none">
58-
<rect width="256" height="256" fill="#242938" rx="60"></rect>
59-
<path fill="#fff" d="M128.001 30C72.779 30 28 74.77 28 130.001c0 44.183 28.653 81.667 68.387 94.89c4.997.926 6.832-2.169 6.832-4.81c0-2.385-.093-10.262-.136-18.618c-27.82 6.049-33.69-11.799-33.69-11.799c-4.55-11.559-11.104-14.632-11.104-14.632c-9.073-6.207.684-6.079.684-6.079c10.042.705 15.33 10.305 15.33 10.305c8.919 15.288 23.394 10.868 29.1 8.313c.898-6.464 3.489-10.875 6.349-13.372c-22.211-2.529-45.56-11.104-45.56-49.421c0-10.918 3.906-19.839 10.303-26.842c-1.039-2.519-4.462-12.69.968-26.464c0 0 8.398-2.687 27.508 10.25c7.977-2.215 16.531-3.326 25.03-3.364c8.498.038 17.06 1.149 25.051 3.365c19.087-12.939 27.473-10.25 27.473-10.25c5.443 13.773 2.019 23.945.98 26.463c6.412 7.003 10.292 15.924 10.292 26.842c0 38.409-23.394 46.866-45.662 49.341c3.587 3.104 6.783 9.189 6.783 18.519c0 13.38-.116 24.149-.116 27.443c0 2.661 1.8 5.779 6.869 4.797C199.383 211.64 228 174.169 228 130.001C228 74.771 183.227 30 128.001 30M65.454 172.453c-.22.497-1.002.646-1.714.305c-.726-.326-1.133-1.004-.898-1.502c.215-.512.999-.654 1.722-.311c.727.326 1.141 1.01.89 1.508m4.919 4.389c-.477.443-1.41.237-2.042-.462c-.654-.697-.777-1.629-.293-2.078c.491-.442 1.396-.235 2.051.462c.654.706.782 1.631.284 2.078m3.374 5.616c-.613.426-1.615.027-2.234-.863c-.613-.889-.613-1.955.013-2.383c.621-.427 1.608-.043 2.236.84c.611.904.611 1.971-.015 2.406m5.707 6.504c-.548.604-1.715.442-2.57-.383c-.874-.806-1.118-1.95-.568-2.555c.555-.606 1.729-.435 2.59.383c.868.804 1.133 1.957.548 2.555m7.376 2.195c-.242.784-1.366 1.14-2.499.807c-1.13-.343-1.871-1.26-1.642-2.052c.235-.788 1.364-1.159 2.505-.803c1.13.341 1.871 1.252 1.636 2.048m8.394.932c.028.824-.932 1.508-2.121 1.523c-1.196.027-2.163-.641-2.176-1.452c0-.833.939-1.51 2.134-1.53c1.19-.023 2.163.639 2.163 1.459m8.246-.316c.143.804-.683 1.631-1.864 1.851c-1.161.212-2.236-.285-2.383-1.083c-.144-.825.697-1.651 1.856-1.865c1.183-.205 2.241.279 2.391 1.097"></path>
60-
</g>
61-
</svg>
62-
</Link>
63-
</div>
64-
</GradientBG>
65-
</div>
6636

6737
<div className="mt-8 flex flex-col gap-4 items-center lg:items-start lg:flex-row">
6838
<Link

0 commit comments

Comments
 (0)