Skip to content

Commit bbcfb69

Browse files
b5b5
committed
direct connection illustration
1 parent e722d5f commit bbcfb69

File tree

8 files changed

+3201
-2686
lines changed

8 files changed

+3201
-2686
lines changed

‎diagrams.ai‎

Lines changed: 2857 additions & 2674 deletions
Large diffs are not rendered by default.

‎public/svg/connect_devices_dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/svg/connect_devices_light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/app/page.mdx‎

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import {Hero} from '@/components/HomeHero';
99
import {UsersShowcase} from '@/components/UsersShowcase';
1010
import {GlowCard} from '@/components/GlowCard';
1111
import {FromTheBlog} from '@/components/FromTheBlog';
12+
import {HammerWrenchCodeIcon} from '@/components/icons/HammerWrenchCodeIcon';
13+
import {PerfChartIllustration} from '@/components/PerfChartIllustration';
14+
import {ConnectDevicesIllustration} from '@/components/ConnectDevicesIllustration';
1215

1316
import logoGo from '@/images/logos/go.svg';
1417
import logoPython from '@/images/logos/python.svg';
@@ -43,11 +46,11 @@ export const metadata = {
4346
<Hero className='' />
4447
</div>
4548
<div className="absolute z-40 max-w-6xl mx-auto md:grid md:grid-cols-4 md:gap-4">
46-
<div className="col-span-2 pl-8" style={{ paddingTop: 105 }}>
49+
<div className="col-span-2 pl-8" style={{ paddingTop: 100 }}>
4750
<h1 className="z-50 text-5xl font-bold font-space-mono leading-tight">
4851
the networking stack for user agency
4952
</h1>
50-
<h3 className="text-md font-space-mono mt-3 leading-normal">Iroh is a library for building on direct connections between devices, putting more control in the hands of your users.</h3>
53+
<h3 className="text-lg font-space-mono mt-3 leading-normal">Iroh is a library for building on direct connections between devices, putting more control in the hands of your users.</h3>
5154
<div className='flex mt-3'>
5255
<a href="https://iroh.computer/docs/quickstart" className="my-4 p-3 px-4 transition bg-irohGray-800 text-irohPurple-500 uppercase hover:bg-irohGray-700 hover:text-gray-200 plausible-event-name=Home+Hero+Start+Project+Click">Start Now</a>
5356
<a href="/docs" className="flex ml-5 my-4 p-3 px-4 bg-gray-300 text-gray-500 transition hover:bg-gray-400 hover:text-gray-200 uppercase plausible-event-name=Home+Hero+Documentation+Click">
@@ -61,13 +64,14 @@ export const metadata = {
6164
</section>
6265

6366
<section className='max-w-6xl mx-auto md:grid md:grid-cols-4 md:gap-4 border-l border-r border-irohGray-300 dark:border-irohGray-800'>
64-
<div className="text-right mlw-xl px-5 py-20 md:col-span-2">
65-
<p className='italic text-3xl text-irohGray-600 dark:text-irohGray-400 mb-5'>&ldquo;In stark contrast to other p2p & dweb technologies we've played with - which are exciting due to their implications for the future - <span className='font-bold'>Iroh brought instant gains in our present.&quot;</span></p>
66-
<p className=''>- The Weird Team</p>
67-
</div>
68-
<div className='md:col-span-2 px-5 py-20 border-l border-irohGray-300 dark:border-irohGray-800'>
67+
<div className='md:col-span-3 px-5 py-20 border-r border-irohGray-300 dark:border-irohGray-800'>
68+
<ConnectDevicesIllustration className='mb-12 max-w-xl' />
6969
<h3 className='text-4xl font-bold mb-4'>Connect any two devices on the planet</h3>
70-
<p className='text-irohGray-600 dark:text-irohGray-400 dark:text-irohGray-200'>Iroh gives you an API for dialing by public key. You say “connect to that phone”, iroh will find & maintain the fastest connection for you, regardless of where it is.</p>
70+
<p className='text-irohGray-600 dark:text-irohGray-400 dark:text-irohGray-200 max-w-2xl'>Iroh gives you an API for dialing by public key. You say “connect to that phone”, iroh will find & maintain the fastest connection for you, regardless of where it is.</p>
71+
</div>
72+
<div className="text-right mlw-xl px-5 py-20 md:col-span-1">
73+
<p className='italic text-xl text-irohGray-600 dark:text-irohGray-400 mb-5'>&ldquo;In stark contrast to other p2p & dweb technologies we've played with - which are exciting due to their implications for the future - <span className='font-bold'>Iroh brought instant gains in our present.&quot;</span></p>
74+
<p className=''>- The Weird Team</p>
7175
</div>
7276
</section>
7377

@@ -103,6 +107,18 @@ export const metadata = {
103107
<p>Broadcast messages to groups of nodes by topic.</p>
104108
</div>
105109
</GlowCard>
110+
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
111+
<Image
112+
src={iconOpen}
113+
alt=""
114+
className="h-12 w-12 float-left md:float-none"
115+
unoptimized
116+
/>
117+
<div className='pl-20 md:pl-0'>
118+
<h2 className='text-2xl mb-2 md:mt-10 text-irohPurple-500 font-bold'>DMs</h2>
119+
<p>Simple node-to-node message passing</p>
120+
</div>
121+
</GlowCard>
106122
<GlowCard className='border-r border-b border-irohGray-300 dark:border-irohGray-800 p-5'>
107123
<Image
108124
src={iconFaster}
@@ -147,13 +163,23 @@ export const metadata = {
147163
</div>
148164
</section>
149165

150-
<section className='max-w-6xl mx-auto px-4 border-l border-r border-irohGray-300 dark:border-irohGray-800 py-20'>
151-
<div className='w-1/2'>
152-
<h3 className='text-3xl font-bold mb-4'>BYOP (build your own protocol)</h3>
166+
<section className='max-w-6xl mx-auto px-4 border-l border-r border-irohGray-300 dark:border-irohGray-800 grid grid-cols-4'>
167+
<div className='md:col-span-2 px-10 py-20'>
168+
<HammerWrenchCodeIcon className='w-20 h-20' />
169+
<h3 className='text-3xl font-bold mb-4'>Build your own protocol</h3>
153170
<p className='mb-10 text-irohGray-600 dark:text-irohGray-400'>Don&apos;t see a protocol you need? Build your own! Iroh gives you a reliable foundation for building distributed systems that reach the edge. The rest is up to you.</p>
154171
<Link href="/docs/quickstart" className={clsx(
155172
"my-4 p-3 transition bg-irohGray-800 text-irohPurple-500 uppercase hover:bg-irohGray-700 hover:text-gray-200 text-lg")}>
156-
<span className=''>Custom Protocol Docs</span>
173+
<span>Custom Protocol Docs</span>
174+
</Link>
175+
</div>
176+
<div className='md:col-span-2 px-10 py-20 md:border-l border-irohGray-300 dark:border-irohGray-800'>
177+
<PerfChartIllustration />
178+
<h3 className='text-3xl font-bold mb-4'>Continuously Measured</h3>
179+
<p className='mb-10 text-irohGray-600 dark:text-irohGray-400'>All commits to iroh's main branch run through a growing set of simulations & tests</p>
180+
<Link href="https://perf.iroh.computer" className={clsx(
181+
"my-4 p-3 transition bg-irohGray-800 text-irohPurple-500 uppercase hover:bg-irohGray-700 hover:text-gray-200 text-lg")}>
182+
<span>Iroh Perf Site</span>
157183
</Link>
158184
</div>
159185
</section>

‎src/components/ConnectDevicesIllustration.jsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import React from 'react';
2+
3+
export const ConnectDevicesIllustration = ({ className }) => (
4+
<div className={className}>
5+
<ConnectDevicesIllustrationLight className='block dark:hidden' />
6+
<ConnectDevicesIllustrationDark className='hidden dark:block' />
7+
</div>
8+
)
9+
10+
11+
export const ConnectDevicesIllustrationDark = ({ className }) => (
12+
<svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 150">
13+
<defs>
14+
<style>
15+
{`
16+
.text {
17+
fill: #7c7cf7;
18+
font-family: SpaceMono-Regular, 'Space Mono';
19+
font-size: 12.59px;
20+
letter-spacing: .1em;
21+
}
22+
.devices-2 { stroke: #9494F7; }
23+
.devices-2, .devices-3 {
24+
fill: none;
25+
stroke-miterlimit: 10;
26+
}
27+
.devices-3 {
28+
stroke: #f8f8f8;
29+
}
30+
.devices-4 {
31+
fill: #282828;
32+
}
33+
.devices-4, .devices-5 {
34+
stroke-width: 0px;
35+
}
36+
.devices-5 {
37+
fill: #9494F7;
38+
}
39+
`}
40+
</style>
41+
</defs>
42+
<g id="Layer_1">
43+
<rect className="devices-3" x="3.23" y="72" width="33.43" height="55.24" rx="5.36" ry="5.36" />
44+
<circle className="devices-3" cx="19.95" cy="121.8" r="1.6" />
45+
<rect className="devices-3" x="472.2" y="72" width="33.43" height="55.24" rx="4.97" ry="4.97" />
46+
<circle className="devices-3" cx="488.92" cy="121.8" r="1.6" />
47+
<path className="devices-3" d="m287,123.74v-54.98c0-.7.57-1.27,1.27-1.27h84.39c.7,0,1.27.57,1.27,1.27v54.98" />
48+
<path className="devices-3" d="m281.45,123.3h98.02v1.11c0,1.53-1.25,2.78-2.78,2.78h-92.46c-1.53,0-2.78-1.25-2.78-2.78v-1.11h0Z" />
49+
<path className="devices-3" d="m113.08,106.41s0,16.66-12.04,16.66v4.17s48.14,0,48.14,0v-4.17c-12.04,0-12.04-16.66-12.04-16.66" />
50+
<rect className="devices-3" x="58.83" y="31.65" width="132.57" height="74.57" />
51+
<polyline className="devices-2" points="214.62 11.71 20.26 11.71 20.26 67.42" />
52+
<polygon className="devices-5" points="18.27 66.83 20.26 70.29 22.26 66.83 18.27 66.83" />
53+
<polyline className="devices-2" points="489.9 67.26 489.9 11.71 284.81 11.71" />
54+
<polygon className="devices-5" points="491.9 66.67 489.9 70.13 487.91 66.67 491.9 66.67" />
55+
<text className="text" transform="translate(155.9 148.2)">
56+
<tspan x="0" y="0">DIRECT</tspan>
57+
</text>
58+
<text className="text" transform="translate(220.53 16.02)">
59+
<tspan x="0" y="0">DIRECT</tspan>
60+
</text>
61+
<text className="text" transform="translate(398.06 102.54)">
62+
<tspan x="0" y="0">RELAY</tspan>
63+
</text>
64+
<line className="devices-2" x1="395.76" y1="97.37" x2="378.43" y2="97.37" />
65+
<polygon className="devices-5" points="379.02 95.38 375.56 97.37 379.02 99.37 379.02 95.38" />
66+
<line className="devices-2" x1="448.37" y1="97.37" x2="467.74" y2="97.37" />
67+
<polygon className="devices-5" points="467.15 99.37 470.61 97.37 467.15 95.38 467.15 99.37" />
68+
<text className="text" transform="translate(213.53 101.14)">
69+
<tspan x="0" y="0">DIRECT</tspan>
70+
</text>
71+
<line className="devices-2" x1="196.69" y1="97.03" x2="211.39" y2="97.03" />
72+
<polygon className="devices-5" points="197.28 99.03 193.82 97.03 197.28 95.04 197.28 99.03" />
73+
<line className="devices-2" x1="282.68" y1="97.03" x2="267.98" y2="97.03" />
74+
<polygon className="devices-5" points="282.1 95.04 285.55 97.03 282.1 99.03 282.1 95.04" />
75+
<polyline className="devices-2" points="153.57 144.19 19.95 144.19 19.95 131.6" />
76+
<polygon className="devices-5" points="21.94 132.19 19.95 128.73 17.95 132.19 21.94 132.19" />
77+
<polyline className="devices-2" points="330.46 131.6 330.46 144.19 210.25 144.19" />
78+
<polygon className="devices-5" points="328.47 132.19 330.46 128.73 332.46 132.19 328.47 132.19" />
79+
</g>
80+
</svg>
81+
);
82+
83+
84+
export const ConnectDevicesIllustrationLight = ({ className }) => (
85+
<svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 150">
86+
<defs>
87+
<style>
88+
{`
89+
.text {
90+
fill: #7c7cf7;
91+
font-family: SpaceMono-Regular, 'Space Mono';
92+
font-size: 12.59px;
93+
letter-spacing: .1em;
94+
}
95+
.devices-light-2 {
96+
stroke: #3C3C3C;
97+
fill: none;
98+
stroke-miterlimit: 10px;
99+
}
100+
.devices-light-3 {
101+
stroke: #9494f7;
102+
fill: none;
103+
stroke-width: 1px;
104+
}
105+
.devices-light-4 {
106+
fill: #9494f7;
107+
}
108+
`}
109+
</style>
110+
</defs>
111+
<rect className="devices-light-2" x="3.84" y="67.59" width="33.43" height="55.24" rx="5.36" ry="5.36"/>
112+
<circle className="devices-light-2" cx="20.55" cy="117.39" r="1.6"/>
113+
<rect className="devices-light-2" x="472.81" y="67.59" width="33.43" height="55.24" rx="4.97" ry="4.97"/>
114+
<circle className="devices-light-2" cx="489.52" cy="117.39" r="1.6"/>
115+
<path className="devices-light-2" d="m287.6,119.33v-54.98c0-.7.57-1.27,1.27-1.27h84.39c.7,0,1.27.57,1.27,1.27v54.98"/>
116+
<path className="devices-light-2" d="m282.06,118.9h98.02v1.11c0,1.53-1.25,2.78-2.78,2.78h-92.46c-1.53,0-2.78-1.25-2.78-2.78v-1.11h0Z"/>
117+
<path className="devices-light-2" d="m113.69,102s0,16.66-12.04,16.66v4.17s48.14,0,48.14,0v-4.17c-12.04,0-12.04-16.66-12.04-16.66"/>
118+
<rect className="devices-light-2" x="59.44" y="27.24" width="132.57" height="74.57"/>
119+
<polyline className="devices-light-3" points="215.23 7.3 20.87 7.3 20.87 63.01"/>
120+
<polygon className="devices-light-4" points="18.88 62.43 20.87 65.88 22.86 62.43 18.88 62.43"/>
121+
<polyline className="devices-light-3" points="490.51 62.85 490.51 7.3 285.42 7.3"/>
122+
<polygon className="devices-light-4" points="492.51 62.27 490.51 65.72 488.52 62.27 492.51 62.27"/>
123+
<text className="text" transform="translate(156.51 143.79)"><tspan x="0" y="0">DIRECT</tspan></text>
124+
<text className="text" transform="translate(221.14 11.61)"><tspan x="0" y="0">DIRECT</tspan></text>
125+
<text className="text" transform="translate(398.67 98.14)"><tspan x="0" y="0">RELAY</tspan></text>
126+
<line className="devices-light-3" x1="396.37" y1="92.97" x2="379.04" y2="92.97"/>
127+
<polygon className="devices-light-4" points="379.62 90.97 376.17 92.97 379.62 94.96 379.62 90.97"/>
128+
<line className="devices-light-3" x1="448.97" y1="92.97" x2="468.34" y2="92.97"/>
129+
<polygon className="devices-light-4" points="467.76 94.96 471.21 92.97 467.76 90.97 467.76 94.96"/>
130+
<text className="text" transform="translate(214.14 96.74)"><tspan x="0" y="0">DIRECT</tspan></text>
131+
<line className="devices-light-3" x1="197.3" y1="92.63" x2="212" y2="92.63"/>
132+
<polygon className="devices-light-4" points="197.88 94.62 194.43 92.63 197.88 90.63 197.88 94.62"/>
133+
<line className="devices-light-3" x1="283.29" y1="92.63" x2="268.59" y2="92.63"/>
134+
<polygon className="devices-light-4" points="282.71 90.63 286.16 92.63 282.71 94.62 282.71 90.63"/>
135+
<polyline className="devices-light-3" points="154.18 139.79 20.55 139.79 20.55 127.2"/>
136+
<polygon className="devices-light-4" points="22.55 127.78 20.55 124.33 18.56 127.78 22.55 127.78"/>
137+
<polyline className="devices-light-3" points="331.07 127.2 331.07 139.79 210.86 139.79"/>
138+
<polygon className="devices-light-4" points="329.08 127.78 331.07 124.33 333.06 127.78 329.08 127.78"/>
139+
</svg>
140+
);

0 commit comments

Comments
 (0)