-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsections.html
442 lines (426 loc) · 19.7 KB
/
sections.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<title>Document</title>
</head>
<body>
<section class="section">
<div class="container has-text-centered">
<h2 class="title">Decentralized, secure, private.</h2>
<div class="block"><img src="assets/img/icons/unicorn.svg" alt=""><img src="assets/img/icons/unicorn.svg"
alt=""><img src="assets/img/icons/unicorn.svg" alt=""></div>
<p>Our mission is not to outsell Hooli with a product like their latest Box 3. We are not in it for the money -
we are in it to make the whole world decentralized. To give you control over your data. To change by the
internet as we know it by integrating a very important feature into it - freedom.</p>
</div>
</section>
<section class="section">
<div class="container has-text-centered py-4">
<h2 class="title mb-6">PiperNet Setup</h2>
<div class="columns is-multiline is-centered">
<div class="column is-8 is-4-widescreen mb-5">
<div class="block"><img src="/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""></div>
<h4 class="title"><small class="number">1</small> Move Data</h4>
<p>Using our Piper Assistant application, you can move your data to be stored our decentralized network with
simple drag & drop.</p>
</div>
<div class="column is-8 is-4-widescreen mb-5">
<div class="block"><img src="/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""></div>
<h4 class="title"><small class="number">2</small> Integrate Software</h4>
<p>We want to make sure that you can keep using the software that you use to manage your business.</p>
</div>
<div class="column is-8 is-4-widescreen mb-5">
<div class="block"><img src="/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""></div>
<h4 class="title"><small class="number">3</small> Ongoing Support</h4>
<p>As with all innovative technologies, sometimes unpredictable things will happen, and you can always count
on our support to solve issues for you.</p>
</div>
</div>
<div class="buttons is-centered"><a class="button is-primary" href="#">Learn more</a></div>
</div>
</section>
<section class="section">
<div class="container py-4">
<h2 class="title has-text-centered mb-6">PiperNet Setup</h2>
<div class="columns is-vcentered">
<div class="column">
<h2 class="title is-spaced">How to start</h2>
<p class="subtitle">Let's get you connected! We've designed a simple, efficient process for companies
migrating to PiperNet. Here's how it works.</p>
<a class="button is-primary" href="#">Start Setup!</a>
</div>
<div class="column"><img src="/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""></div>
</div>
<hr class="my-6">
<div class="level">
<div class="level-item">
<div class="number has-background-primary">1</div>
<h4 class="title is-4">Move</h4>
</div>
<div class="level-item">
<div class="number">2</div>
<h4 class="title is-4">Integrate</h4>
</div>
<div class="level-item">
<div class="number">3</div>
<h4 class="title is-4">Support</h4>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container has-text-centered">
<h2 class="title is-spaced">Future of the Internet</h2>
<p class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to revolutionize every
smartphone, PC, and smart-fridge near you.</p>
<div class="buttons is-centered mt-6 mb-6"><a class="button is-primary" href="#">Join the Revolution!</a></div>
<h3 class="title is-5">Great Companies that already use PiperNet</h3>
<div class="columns px-6">
<div class="column px-5"><img src="/placeholder/logos/gitscape.svg?primary=00d1b2" alt=""></div>
<div class="column px-5"><img src="/placeholder/logos/k-hole.svg?primary=00d1b2" alt=""></div>
<div class="column px-5"><img src="/placeholder/logos/tholio.svg?primary=00d1b2" alt=""></div>
<div class="column px-5"><img src="/placeholder/logos/plucky.svg?primary=00d1b2" alt=""></div>
<div class="column px-5"><img src="/placeholder/logos/1stsight.svg?primary=00d1b2" alt=""></div>
</div>
</div>
</section>
<section class="section">
<div class="container has-text-centered py-4">
<h2 class="title">The Pipers</h2>
<p class="subtitle mb-6">We are the guys that made this whole thing possible</p>
<div class="columns py-5">
<div class="column is-4">
<div class="level">
<div class="level-item">
<figure class="image is-128x128"><img class="is-rounded"
src="/placeholder/pictures/bg_circle.svg?primary=00d1b2" alt=""></figure>
</div>
</div>
<h5 class="title is-5">Richard Hendricks</h5>
<p class="subtitle is-6">CEO</p>
<p>When I'm not obsessively stressing about the fate of Pied Piper, I sometimes give lectures to school
kids. Spend most of my time coding.</p>
</div>
<div class="column is-4">
<div class="level">
<div class="level-item">
<figure class="image is-128x128"><img class="is-rounded"
src="/placeholder/pictures/bg_circle.svg?primary=00d1b2" alt=""></figure>
</div>
</div>
<h5 class="title is-5">Dinesh Chugtai</h5>
<p class="subtitle is-6">CTO</p>
<p>I am the absolute best programmer at Pied Piper (especially better than Gilfoyle). My genius shines and
guides the Pied Piper team.</p>
</div>
<div class="column is-4">
<div class="level">
<div class="level-item">
<figure class="image is-128x128"><img class="is-rounded"
src="/placeholder/pictures/bg_circle.svg?primary=00d1b2" alt=""></figure>
</div>
</div>
<h5 class="title is-5">Bertram Gilfoyle</h5>
<p class="subtitle is-6">Chief Systems Architect</p>
<p>I work on Pied Piper only for the advanced technology. I don't really like most people I work with, but
they need me to put out their fires, so I stay.</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container has-text-centered py-4">
<h2 class="title">Our plans</h2>
<hr class="my-6">
<div class="columns">
<div class="column">
<h3 class="title is-4">Small Piper</h3>
<h4 class="title is-spaced is-5">$10 <small>Per user / monthly</small></h4>
<p class="subtitle">Join our network, but build and manage everything yourself.</p>
<hr>
<ul>
<li>100GB storage</li>
<li>5 Applications</li>
<li>20 users max</li>
<li>Unlimited Data Transfer</li>
</ul>
<hr>
<div class="buttons is-centered">
<button class="button is-primary" type="button">Contact Sales</button>
</div>
</div>
<div class="column">
<h3 class="title is-4">Medium Piper</h3>
<h4 class="title is-spaced is-5">$50 <small>Per user / monthly</small></h4>
<p class="subtitle">We build what you need, but you still need to manage your data.</p>
<hr>
<ul>
<li>1000GB storage</li>
<li>20 Applications</li>
<li>200 users max</li>
<li>Unlimited Data Transfer</li>
</ul>
<hr>
<button class="button is-primary is-outlined" type="button">Contact Sales</button>
</div>
<div class="column">
<h3 class="title is-4">Enterprise Piper</h3>
<h4 class="title is-spaced is-5">$100 <small>Per user / monthly</small></h4>
<p class="subtitle">We do everything for you, including managing your data.</p>
<hr>
<ul>
<li>Unlimited storage</li>
<li>Unlimited Applications</li>
<li>Unlimited users max</li>
<li>Unlimited Data Transfer</li>
</ul>
<hr>
<button class="button is-primary is-outlined" type="button">Contact Sales</button>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container py-r">
<h2 class="title">Great Companies that already use PiperNet</h2>
<div class="columns">
<div class="column is-9"><a href="#"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a>
</div>
<div class="column is-3">
<div class="columns is-mobile is-multiline">
<div class="column is-4-mobile is-12-tablet"><a href="#"><img
src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a></div>
<div class="column is-4-mobile is-12-tablet"><a href="#"><img
src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a></div>
<div class="column is-4-mobile is-12-tablet"><a href="#"><img
src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a></div>
</div>
</div>
</div>
<div class="columns">
<div class="column is-half">
<h4 class="title is-spaced is-4">Client: K-Hole</h4>
<p class="subtitle">We are constantly looking for new partners to migrate onto the Piper Net. The future of
the internet is here - venture towards it with Pied Piper!</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns is-desktop is-vcentered">
<div class="column is-6-desktop"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></div>
<div class="column is-6-desktop">
<div class="level is-mobile">
<div class="level-left"><a class="level-item" href="#"><img src="assets/img/icons/unicorn.svg" alt=""></a><a
class="level-item" href="#"><img src="assets/img/icons/unicorn.svg" alt=""></a><a class="level-item"
href="#"><img src="assets/img/icons/unicorn.svg" alt=""></a><a class="level-item" href="#"><img
src="assets/img/icons/unicorn.svg" alt=""></a><a class="level-item" href="#"><img
src="assets/img/icons/unicorn.svg" alt=""></a></div>
</div>
<h2 class="title is-spaced">Official Pied Piper T-Shirt</h2>
<p class="subtitle">This wonderful green shirt will make you an evangelist of Pied Pipers' world-changing
technology. It will make you stand out anywhere you go - so say yes to decentralization, and say yes to
our official Pied Piper swag.</p>
<div class="level is-mobile">
<div class="level-left">
<a class="level-item" href="#">
<div class="tag is-primary"> </div>
</a>
<a class="level-item" href="#">
<div class="tag is-danger"> </div>
</a>
<a class="level-item" href="#">
<div class="tag is-dark"> </div>
</a>
<a class="level-item" href="#">
<div class="tag is-info"> </div>
</a>
</div>
</div>
<div class="columns">
<div class="column is-half">
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">$399</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="number" placeholder="1">
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-primary">Buy Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="level is-mobile">
<div class="level-left">
<div class="level-item"><a href="#">Add to favorites</a></div>
</div>
<div class="level-right">
<div class="level-item">Share</div>
<a class="level-item" href="#"><img src="assets/img/icons/facebook-f.svg" alt=""></a><a class="level-item"
href="#"><img src="assets/img/icons/twitter.svg" alt=""></a><a class="level-item" href="#"><img
src="assets/img/icons/instagram.svg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container has-text-centered py-4">
<h2 class="title mb-6">What's So Great About PiperNet?</h2>
<div class="columns">
<div class="column">
<div class="level">
<div class="level-item">
<figure class="image is-128x128"><img class="is-rounded"
src="/placeholder/pictures/bg_circle.svg?primary=00d1b2" alt=""></figure>
</div>
</div>
<p class="block">It's a really cool network. Like, we had a fight with Richard at one point, and I think
they deleted some of my data, but then they brought it back. Just bro's being bro's.</p>
<h5 class="title is-5">Colin</h5>
<p class="subtitle">CEO at K-Hole</p>
</div>
<div class="column">
<div class="level">
<div class="level-item">
<figure class="image is-128x128"><img class="is-rounded"
src="/placeholder/pictures/bg_circle.svg?primary=00d1b2" alt=""></figure>
</div>
</div>
<p class="block">This is such a great product that I feel aroused every time I use it. I didn't know the
boys would be able to build, but god damn it, they did it. Kickass!</p>
<h5 class="title is-5">Russ Hanneman</h5>
<p class="subtitle">Investor, Angel, Great Guy</p>
</div>
<div class="column">
<div class="level">
<div class="level-item">
<figure class="image is-128x128"><img class="is-rounded"
src="/placeholder/pictures/bg_circle.svg?primary=00d1b2" alt=""></figure>
</div>
</div>
<p class="block">Even though I have been dismantled, I live on as an artificial intelligence on the
PiperNet. I really like it here. Still waiting for Jared to Piper-chat with me sometime.</p>
<h5 class="title is-5">Fiona</h5>
<p class="subtitle">Artificial Intelligence</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container py-4">
<h2 class="title has-text-centered mb-6">Gallery</h2>
<div class="columns is-multiline">
<div class="column is-4"><a href="#"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a>
</div>
<div class="column is-4"><a href="#"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a>
</div>
<div class="column is-4"><a href="#"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a>
</div>
<div class="column is-4"><a href="#"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a>
</div>
<div class="column is-4"><a href="#"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a>
</div>
<div class="column is-4"><a href="#"><img src="/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></a>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container has-text-centered py-4">
<h2 class="title mb-6">Some of our awesome features</h2>
<div class="block"><img class="is-16by9 mb-6" src="/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt="">
</div>
<div class="columns has-text-left mb-6">
<div class="column is-4">
<div class="columns">
<div class="column is-2"><img src="assets/img/icons/check.svg" alt=""></div>
<div class="column is-10">
<h4 class="title is-spaced is-4">Security</h4>
<p class="subtitle is-6">Your data is virtually unhackable compared to traditional net</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="columns">
<div class="column is-2"><img src="assets/img/icons/check.svg" alt=""></div>
<div class="column is-10">
<h4 class="title is-spaced is-4">Privacy</h4>
<p class="subtitle is-6">Nobody is tracking you when your activity when you use Piper Net</p>
</div>
</div>
</div>
<div class="column is-4">
<div class="columns">
<div class="column is-2"><img src="assets/img/icons/check.svg" alt=""></div>
<div class="column is-10">
<h4 class="title is-spaced is-4">Speed</h4>
<p class="subtitle is-6">Previously unimaginable transfer speed thanks to middle-out compression</p>
</div>
</div>
</div>
</div>
<div class="buttons is-centered"><a class="button is-primary" href="#">Read more</a></div>
</div>
</section>
<section class="section">
<div class="container py-4">
<h2 class="title has-text-centered mb-6">Frequently Asked Questions</h2>
<div class="panel">
<div class="panel-block is-block py-3 px-4">
<a class="media" href="#">
<div class="media-content">How is a decentralized network different from the traditional web?</div>
<div class="media-right"><img src="assets/img/icons/chevron-circle-down.svg" alt=""></div>
</a>
</div>
<div class="panel-block is-block py-3 px-4">
<a class="media" href="#">
<div class="media-content">Why shouldn't I just store my data on a Hooli Box?</div>
<div class="media-right"><img src="assets/img/icons/chevron-circle-down.svg" alt=""></div>
</a>
</div>
<div class="panel-block is-block py-3 px-4">
<a class="media" href="#">
<div class="media-content">What makes PiperNet so safe?</div>
<div class="media-right"><img src="assets/img/icons/chevron-circle-down.svg" alt=""></div>
</a>
</div>
<div class="panel-block is-block py-3 px-4">
<a class="media" href="#">
<div class="media-content">How long does it take to get a company up and running on PiperNet?</div>
<div class="media-right"><img src="assets/img/icons/chevron-circle-down.svg" alt=""></div>
</a>
</div>
<div class="panel-block is-block py-3 px-4">
<a class="media" href="#">
<div class="media-content">How is a decentralized network different from the traditional web?</div>
<div class="media-right"><img src="assets/img/icons/chevron-circle-down.svg" alt=""></div>
</a>
</div>
<div class="panel-block is-block py-3 px-4">
<a class="media" href="#">
<div class="media-content">Why shouldn't I just store my data on a Hooli Box?</div>
<div class="media-right"><img src="assets/img/icons/chevron-circle-down.svg" alt=""></div>
</a>
</div>
</div>
</div>
</section>
</div>
</body>
</html>