-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathnew.html
816 lines (778 loc) · 31.5 KB
/
new.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
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
<!DOCTYPE html>
<html>
<head>
<title>Supernetwork Routers</title>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta property="og:url" content="https://www.supernetworks.org/" />
<meta property="og:title" content="Supernetwork Routers" />
<meta
property="og:description"
content="SPR is designed from the ground up by veteran information security professionals with one goal in mind: allowing users to gain complete control of their networks — even with minimal technical knowledge."
/>
<meta
property="og:image"
content="https://www.supernetworks.org/assets/img/bgs/bg-dark.png"
/>
<link href="/output.css" rel="stylesheet" />
</head>
<body class="dark:bg-gray-900">
<!--div class="bg-violet border-b border-gray-200 px-2 py-2.5 text-center dark:bg-gray-800">
⭐️ If you like SPR, give it a star on <a class="text-underline" target="_blank" href="https://github.com/spr-networks/super/">GitHub!</a> ⭐️
</div-->
<nav
class="md:flex bg-slate-800 border-gray-200 px-2 sm:px-4 py-4 dark:bg-gray-800"
>
<div
class="container flex flex-wrap justify-between items-center mx-auto"
>
<a href="#" class="flex items-center">
<!--img src="/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" /-->
<span
class="self-center text-xl font-semibold whitespace-nowrap text-white"
>SPR</span
>
</a>
<button
data-collapse-toggle="mobile-menu"
type="button"
id="trigger-mobile-menu"
class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 md:rounded-lg md:hidden hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span class="sr-only">Open main menu</span>
<svg
class="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
clip-rule="evenodd"
></path>
</svg>
<svg
class="hidden w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
<ul
class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium"
>
<li>
<a
href="#"
class="block py-2 pr-4 pl-3 text-white bg-slate-700 rounded md:bg-transparent md:text-gray-200 md:p-0 dark:text-white"
aria-current="page"
>Home</a
>
</li>
<li>
<a
href="https://www.supernetworks.org/pages/blog/first-blog-post"
class="block py-2 pr-4 pl-3 text-gray-400 border-b border-slate-900 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-gray-200 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>About</a
>
</li>
<li>
<a
href="https://www.supernetworks.org/pages/docs/setup_guides/pi4b"
class="block py-2 pr-4 pl-3 text-gray-400 border-b border-slate-900 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-gray-200 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>Guide</a
>
</li>
<li>
<a
href="http://demo.supernetworks.org/"
class="block py-2 pr-4 pl-3 text-gray-400 border-b border-slate-900 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-gray-200 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>Demo</a
>
</li>
<li>
<a
href="https://www.supernetworks.org/pages/docs/intro"
class="block py-2 pr-4 pl-3 text-gray-400 border-b border-slate-900 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-gray-200 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"
>Documentation</a
>
</li>
<li>
<a
href="https://www.supernetworks.org/pages/blog"
class="block py-2 pr-4 pl-3 text-gray-400 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-gray-200 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>Blog</a
>
</li>
</ul>
</div>
</div>
</nav>
<header class="relative bg-rose-100">
<div
__class="pt-8 md:py-32 flex flex-col text-neutral-50 antialiased bg-cover bg-center bg-slate-900 bg-slate-500 bg-[url(/assets/img/bgs/bg-dark.png)] bg-blend-multiply"
class="pt-8 md:py-32 flex flex-col text-neutral-50 antialiased bg-cover bg-center bg-slate-900"
>
<div
class="px-4 md:px-0 md:w-10/12 md:mx-auto flex flex-col items-center justify-center gap-y-4"
>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-3/4 flex flex-col space-y-8">
<p
class="text-4xl font-bold"
style="text-shadow: 1px 1px 2px black"
>
SPR: Secure Programmable Routers
</p>
<p
class="uppercase text-slate-300"
style="text-shadow: 1px 1px 2px black"
>
Your router should be
<span class="underline italic">yours</span> -
<span>Regain control of your network</span>
</p>
<p
class="text-lg font-light mr-16"
style="text-shadow: 1px 1px 2px black"
>
SPR is designed from the ground up by veteran information
security professionals with one goal in mind: allowing users to
gain complete control of their networks — even with minimal
technical knowledge.
</p>
<div class="md:inline-flex pb-12" role="group">
<a
href="https://www.supernetworks.org/pages/docs/setup_guides/pi4b#install-the-spr-pi-4-image"
>
<button
type="button"
class="text-white bg-indigo-600 hover:bg-indigo-800 focus:ring-4 focus:ring-blue-300 font-medium md:rounded-lg px-5 py-2 mr-6 mb-2 my-4"
>
Get Started
</button>
</a>
<a
href="https://github.com/spr-networks/super/releases/latest/download/spr.img.xz"
>
<button
type="button"
class="text-slate-50 bg-violet-600 hover:text-white hover:bg-violet-800 focus:ring-4 focus:ring-blue-300 font-medium md:rounded-lg px-5 py-2 mr-2 mb-2 my-4"
>
Download now
</button>
</a>
<a href="https://www.supernetworks.org/pages/docs/intro">
<button
type="button"
class="text-violet-50 focus:ring-4 focus:ring-blue-300 font-medium md:rounded-lg px-4 py-2.5 mr-2 mb-2 my-4"
>
Read the docs →
</button>
</a>
</div>
</div>
<div class="hidden md:block md:w-1/4 flex justify-center">
<img
src="/assets/img/test/logo-transparent.png"
alt=""
width="220"
class="block opacity-80 hover:opacity-100 my-8"
/>
</div>
</div>
</div>
</div>
<div
class="md:mx-auto p-8 md:px-0 md:pb-16 flex flex-col items-center space-x-4 space-y-6 bg-neutral-50 dark:bg-slate-900 text-center"
>
<!--h1
class="mb-4 text-4xl font-medium tracking-tight text-slate-900 dark:text-slate-200 lg:text-5xl"
>
SPR Enables Secure Programmable Routers
</h1>
<p
class="max-w-2xl mb-6 text-gray-700 dark:text-slate-300 sm:text-lg md:text-md md:mb-10 sm:mb-8"
>
Linux and the open source community provide incredible versatility for
home networking. SPR unleashes those abilities with an enhanced focus
on network hardening.
</p-->
<h1
class="mb-4 text-3xl font-medium tracking-tight text-slate-900 dark:text-slate-200 lg:text-3xl"
>
Core Features
</h1>
<div
class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4 text-left text-slate-800 dark:text-slate-200 mt-4"
>
<div>
<h2 class="text-xl mb-2">Network Management</h2>
<ul class="text-sm md:text-base">
<li>✓ Access control</li>
<li>✓ Device groups</li>
<li>✓ Multicast support</li>
<li>✓ Traffic statistics</li>
<li>✓ Mac spoofing protection</li>
</ul>
</div>
<div>
<h2 class="text-xl mb-2">WiFi</h2>
<ul class="text-sm md:text-base">
<li>✓ WPA2 & WPA3 support</li>
<li>✓ Strong device isolation</li>
<li>✓ Per-device passphrases</li>
<li>✓ Easy QR-Code Setup</li>
</ul>
</div>
<div>
<h2 class="text-xl mb-2">DNS</h2>
<ul class="text-sm md:text-base">
<li>✓ DNS over HTTPS</li>
<li>✓ Custom Ad Block Lists</li>
<li>✓ DNS Logs</li>
<li>✓ DNS Rebinding Protection</li>
<li>✓ Per Device Rules</li>
</ul>
</div>
<div>
<h2 class="text-xl mb-2">Wireguard</h2>
<ul class="text-sm md:text-base">
<li>✓ Device Identity Integration</li>
<li>✓ Multicast Support</li>
<li>✓ Easy QR-Code Setup</li>
</ul>
</div>
</div>
</div>
</header>
<section
class="bg-gray-900 md:p-8 md:pt-24 md:pb-28 bg-cover bg-center md:bg-[url(/assets/img/bgs/bg-dark.png)]"
>
<div>
<div
class="bg-violet-900/80 hover:bg-violet-800/70 rounded-lg p-4 md:mt-24 text-center text-xl text-slate-200 cursor-pointer max-w-md mx-auto"
onclick="location.href='http://demo.supernetworks.org/"
>
<a href="http://demo.supernetworks.org/" target="_blank"
>Try the UI demo →</a
>
</div>
</div>
</section>
<div
class="p-8 md:px-0 md:py-12 flex flex-col space-y-16 bg-neutral-100 text-neutral-900 antialiased dark:bg-slate-800 dark:text-slate-50"
>
<div class="md:w-5/6 md:mx-auto flex flex-col md:flex-row gap-x-4">
<div class="md:w-1/3 flex items-center">
<img class="mx-auto mb-4 w-48 opacity-90 dark:invert" src="/assets/img/github.svg" />
</div>
<div class="md:w-2/3 flex flex-col gap-y-8">
<h4 class="text-2xl font-mono font-bold">
Secure from the moment you turn on your device
</h4>
<p>
SPR is self-hosted. Your data is not stored on our servers, we do
not collect telemetry data, error reports, or any other data that
could expose your information to us or anyone else. With SPR, your
router is truly your router.
</p>
<p>
SPR is both
<a
class="underline"
href="https://github.com/spr-networks/super"
target="_blank"
rel="noreferrer"
>open source</a
>
and thoughtfully sourced. SPR’s code base is both transparent and
the result a careful curation process designed to ensure that SPR is
comprised of code only from open source projects with good security
track records and that deploy safer programing paradigms—such as the
use of
<a
class="underline"
href="https://media.defense.gov/2022/Nov/10/2003112742/-1/-1/0/CSI_SOFTWARE_MEMORY_SAFETY.PDF"
target="_blank"
rel="noreferrer"
>memory safe</a
>
languages.
</p>
<p>
SPR allows users to effortlessly deploy cutting edge security
paradigms such as zero-trust networking and device isolation.
</p>
</div>
</div>
</div>
<div
class="p-8 md:px-0 md:py-12 flex flex-col space-y-16 bg-white text-neutral-900 antialiased dark:bg-slate-900 dark:text-slate-50"
>
<div class="md:w-5/6 md:mx-auto flex flex-row gap-x-4">
<div class="md:w-2/3 flex flex-col gap-y-8">
<h4 class="text-2xl font-mono font-bold">
A secure network shouldn't be rocket science
</h4>
<p>
SPR comes with a beautiful and intuitive graphic user interface that
allows you to monitor your network and deploy powerful
<em>finely tailored</em> security features with ease.
</p>
<p>
DNS ad blocking, VPN support, firewall rules, device isolation, and
many other security features can be deployed with just a few clicks.
</p>
<p>
Want to apply strict security controls to just one device or group
of devices on your network? No problem. Point and click. Want to run
all network traffic to a particular website through a VPN server in
the United States, and all other network traffic through a VPN
server in Germany? No problem. Point and click.
</p>
</div>
<!--
class="w-full mx-auto min-h-[270px] md:w-[540px] md:h-[350px] bg-no-repeat bg-contain bg-[url(/assets/img/api-preview.png)] dark:bg-[url(/assets/img/api-preview-dark.png)]"
-->
<div
class="md:w-1/3 flex items-center justify-center bg-no-repeat bg-cover bg-[url(/assets/img/test/logo-spr.png)]"
>
<!--img src="/assets/img/logo-spr.png" width="300" alt="logo SPR" /-->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="text-blue-900 opacity-30 mt-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z"
/>
</svg>
</div>
</div>
</div>
<hr />
<div
class="p-8 md:px-0 md:py-12 flex flex-col space-y-16 bg-white text-neutral-900 antialiased"
>
<div class="md:w-5/6 md:mx-auto flex flex-col md:flex-row gap-x-4">
<div class="md:w-1/3 flex items-center">
<img
_src="/assets/img/test/[email protected]"
src="/assets/img/test/vecteezy_router-tech-icon_17064258.jpg"
width="400"
alt=""
/>
</div>
<div class="md:w-2/3 flex flex-col gap-y-8 justify-center">
<h4 class="text-2xl font-mono font-bold">
Bring your own device - or don't
</h4>
<p>
SPR is primarily designed to run as a Wi-Fi router on Raspberry Pi
hardware—which you can buy
<a href="#" class="underline">directly from us</a>.
</p>
<p>
SPR can also be deployed on your home server or a cloud provider as
a standalone VPN and DNS service—allowing you to unlock powerful
security features such as DNS blocking, tailored firewall rules, and
network segmentation—without a new Wi-Fi router.
</p>
</div>
</div>
</div>
<hr />
<div class="md:py-12 md:-mt-24 relative">
<div class="md:w-2/3 mx-auto">
<section>
<div
class="bg-neutral-200 text-gray-700 dark:bg-gray-800 dark:text-gray-300 flex flex-col items-center pt-6 pb-4 md:md:rounded-lg"
>
<p class="text-gray-600 dark:text-gray-400">Available for</p>
<ul
class="flex flex-wrap items-center justify-center mt-2 font-medium"
>
<li class="flex items-center px-4 py-3">
<img
class="mr-2 w-6 opacity-70 dark:invert"
src="/assets/img/linux.svg"
/>
Linux
</li>
<li class="flex items-center px-4 py-3">
<img
class="mr-2 w-6 opacity-70 dark:invert"
src="/assets/img/apple.svg"
/>
Mac
</li>
<li class="flex items-center px-4 py-3">
<img
class="mr-2 w-8 opacity-70 dark:invert"
src="/assets/img/chip.svg"
/>
ARMv8 & amd64
</li>
<li class="flex items-center px-4 py-3">
<img
class="mr-2 w-8 opacity-70 dark:invert"
src="/assets/img/raspberrypi.svg"
/>
Raspberry Pi
</li>
</ul>
</div>
</section>
</div>
</div>
<div
class="mx-auto max-h-[490px] overflow-y-hidden max-w-full md:max-w-5xl bg-neutral-200 dark:bg-gray-800 md:bg-transparent"
>
<div
class="bg-gray-900 dark:bg-black pt-3 px-3 md:px-5 md:pt-5 rounded-t-3xl"
>
<div class="overflow-hidden md:py-0 rounded-t-2xl">
<!--img class="w-full max-w-[1024px]" src="/assets/img/screenshot-light.png" /-->
<div
class="w-full max-w-[1024px] min-h-[240px] md:h-[640px] bg-no-repeat bg-contain bg-[url(/assets/img/screenshot-light.png)] dark:bg-[url(/assets/img/screenshot-dark.png)]"
></div>
</div>
</div>
</div>
<div
class="p-8 md:px-0 md:py-12 flex flex-col space-y-16 bg-slate-900 text-neutral-50 antialiased"
>
<div class="md:w-5/6 md:mx-auto flex flex-col md:flex-row gap-x-4">
<div class="md:w-1/3 flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-48 h-48 text-yellow-300"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
/>
</svg>
</div>
<div class="md:w-2/3 flex flex-col gap-y-8 justify-center">
<h4 class="text-2xl font-mono font-bold">
Don’t compromise on performance
</h4>
<p>
SPR is built for speed and can be deployed on even the most advanced
networking hardware on the market today, including hardware that
supports Wi-Fi 6.
</p>
</div>
</div>
</div>
<div
class="p-8 md:px-0 md:py-16 flex flex-col space-y-16 bg-slate-800 text-neutral-50 antialiased"
>
<div class="md:w-5/6 md:mx-auto flex flex-col md:flex-row gap-x-8">
<div class="md:w-7/12 flex flex-col gap-y-8 justify-center">
<h4 class="text-2xl font-mono font-bold">
Endlessly customizable and programmable
</h4>
<p>
Go beyond the GUI. All functions and features of SPR are accessible
via an
<a
href="https://www.supernetworks.org/pages/api/0#section/API-Extensions"
>API</a
>, allowing power users to not only programmatically define how the
network connects, but pull detailed information about devices on
your network.
</p>
<p>
Open source and easy to develop for — <em>securely</em>. SPR uses
containerized services to allow for rapid development, simple
deployment of new features, and hot swapping of core network
services, such as DNS and DHCP.
</p>
<p>
Tools for hackers, penetration testers, and other explorers. SPR
makes controlling and monitoring data flows on your network easier —
making research into the functionality of devices and software on
your network less cumbersome.
</p>
</div>
<div class="md:w-5/12 mt-4 md:mt-0 flex items-center">
<img src="/assets/img/api-preview.png" width="100%" alt="" />
</div>
</div>
</div>
<!-- bg-neutral-800 -->
<section
class="bg-[#110133] text-gray-100 p-8 md:px-24 md:pb-24 text-center"
>
<img src="/assets/img/bgs/wifi.png" class="mx-auto max-w-[300px]" />
<h3 class="mb-4 text-3xl font-medium tracking-tight text-slate-100 mt-8">
WiFi Router + DNS + VPN Server
</h3>
<!--p class="text-slate-500">With this software, hobbyists and
developers alike can innovate, build, and deploy flexible networks
with best of class network security.</p-->
<p class="text-slate-100 md:px-32">
SPR is built to run as a WiFi router managing the host network, but it
can also run in a network namespace as a virtualized standalone VPN
& DNS Service.
</p>
<ul
class="flex flex-wrap items-center justify-center mt-2 font-medium text-neutral-100"
>
<li class="flex items-center md:px-4 py-3">
<img
class="mr-1"
style="width: 32px; height: 20px; filter: invert(0.9)"
src="/assets/img/ubuntu.svg"
/>
Ubuntu
</li>
<li class="flex items-center md:px-4 py-3">
<img
class="mr-1"
style="width: 32px; height: 20px; filter: invert(0.9)"
src="/assets/img/docker.svg"
/>
Docker
</li>
<li class="flex items-center md:px-4 py-3">
<img
class="mr-1"
style="width: 32px; height: 20px; filter: invert(0.9)"
src="/assets/img/wireguard.svg"
/>
Wireguard
</li>
</ul>
</section>
<section
class="bg-gray-900 md:p-8 md:py-16"
style="background-size: 100% auto; background-position: center 0"
>
<div class="grid md:grid-cols-3 md:gap-4 md:p-4">
<div
class="bg-neutral-800/60 hover:bg-neutral-800/70 md:rounded-lg p-8 text-center text-slate-100 cursor-pointer"
onClick="location.href='https://www.supernetworks.org/pages/docs/setup_guides/pi4b'"
>
<img
class="mx-auto mb-4 w-8 invert"
src="/assets/img/raspberrypi.svg"
/>
<a
class="text-xl text-bold"
href="https://www.supernetworks.org/pages/docs/setup_guides/pi4b"
>Raspberry Pi Setup Guide</a
>
<p>Get running on a Raspberry Pi 4 with Ubuntu for ARM64</p>
</div>
<div
class="bg-neutral-800/60 hover:bg-neutral-800/70 md:rounded-lg p-8 text-center text-slate-100 cursor-pointer"
onClick="location.href='https://www.supernetworks.org/pages/blog'"
>
<img
class="mx-auto mb-4 w-8 invert"
src="/assets/img/rss_feed_FILL0_wght400_GRAD0_opsz48.svg"
/>
<a
class="text-xl text-bold"
href="https://www.supernetworks.org/pages/blog"
>The Blog</a
>
<p>Articles about linux networking, wifi, and security</p>
</div>
<div
class="bg-neutral-800/60 hover:bg-neutral-800/70 md:rounded-lg p-8 text-center text-slate-100 cursor-pointer"
onClick="location.href='https://github.com/spr-networks/'"
>
<img class="mx-auto mb-4 w-8 invert" src="/assets/img/github.svg" />
<a class="text-xl text-bold" href="https://github.com/spr-networks/"
>Github</a
>
<p>View the projects, get the code, file issues</p>
</div>
</div>
<div class="grid md:grid-cols-3 md:gap-4 md:p-4">
<div
class="bg-neutral-800/60 hover:bg-neutral-800/70 md:rounded-lg p-8 text-center text-slate-100 cursor-pointer"
onClick="location.href='https://www.supernetworks.org/pages/docs/intro'"
>
<img
class="mx-auto mb-4 w-8 invert"
src="/assets/img/description_FILL0_wght400_GRAD0_opsz48.svg"
/>
<a
class="text-xl text-bold"
href="https://www.supernetworks.org/pages/docs/intro"
>Documentation</a
>
<p>Learn more about SPR and view the API Documenation</p>
</div>
<div
class="bg-neutral-800/60 hover:bg-neutral-800/70 md:rounded-lg p-8 text-center text-slate-100 cursor-pointer"
onClick="location.href='https://discord.gg/EUjTKJPPAX'"
>
<img class="mx-auto mb-4 w-8 invert" src="/assets/img/discord.svg" />
<a class="text-xl text-bold" href="https://discord.gg/EUjTKJPPAX"
>Join the Discord Chat</a
>
<p>Chat with the SPR community, get help setting up, ask questions</p>
</div>
<div
class="bg-neutral-800/60 hover:bg-neutral-800/70 md:rounded-lg p-8 text-center text-slate-100 cursor-pointer"
onClick="location.href='https://www.supernetworks.org/pages/docs/security'"
>
<img
class="mx-auto mb-4 w-8 invert"
src="/assets/img/security_FILL0_wght400_GRAD0_opsz48.svg"
/>
<a
class="text-xl text-bold"
href="https://www.supernetworks.org/pages/docs/security"
>Security Overview</a
>
<p>
Threat modeling, security practices, and security contact
information
</p>
</div>
</div>
</section>
<!--div
class="bg-white dark:bg-gray-900 p-4 flex flex-col space-y-8 divide-y dark:divide-slate-700"
>
<div class="md:p-8 md:flex items-center space-x-4 space-y-4 mx-4">
<div class="px-8">
<img
class="w-[128px] opacity-80 mx-auto dark:invert"
src="/assets/img/wifi_FILL0_wght400_GRAD0_opsz48.svg"
/>
</div>
<div class="flex flex-col space-y-2">
<h3 class="text-2xl dark:text-slate-300">
Hardened 802.11 Authentication and Access Control
</h3>
<p class="text-slate-500">
Give each device a unique WPA2/3 password, to create trusted device
identities without certificate enrollment. This zero-install
solution works for anything from a smart toaster-oven to a next-gen
laptop. Place devices into predefined or custom network groups to
set their internet access, approved network peers and allowed
protocols.
</p>
</div>
</div>
<div class="py-4 md:p-8 md:flex items-center space-x-4 space-y-4 mx-4">
<div class="px-8">
<img
class="w-[128px] opacity-80 mx-auto dark:invert"
src="/assets/img/github.svg"
/>
</div>
<div class="flex flex-col space-y-2">
<h3 class="text-2xl dark:text-slate-300">Open Source First</h3>
<p class="text-slate-500">
SPR is open source and homelab ready. It uses containerized services
to allow for rapid development, simple deployment of new features,
and hot swapping of core network services, such as DNS and DHCP.
</p>
<a
class="text-slate-600 mt-3 hover:underline"
href="https://github.com/spr-networks/super/"
>Check out the code →</a
>
</div>
</div>
</div-->
<footer
class="p-4 shadow md:flex md:items-center md:justify-between md:p-6 md:py-8"
>
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400"
>© 2023
<a href="https://www.supernetworks.org" class="hover:underline"
>Supernetworks, Inc.</a
>
All Rights Reserved.
</span>
<ul
class="flex items-center mt-3 text-sm text-gray-500 dark:text-gray-400 sm:mt-0 space-x-4 md:space-x-8"
>
<li class="hidden md:block">
<a
href="https://www.supernetworks.org/pages/blog/first-blog-post"
class="hover:underline"
>About</a
>
</li>
<!--li>
<a href="#" class="mr-4 hover:underline md:mr-6">Privacy Policy</a>
</li-->
<li>
<a
class="hover:underline flex justify-start"
href="https://github.com/spr-networks/super/"
>
<div
class="inline-flex w-5 h-5 pl-6 bg-no-repeat bg-[url(/assets/img/discord.svg)] dark:invert dark:opacity-70"
></div>
<div class="inline-flex align-self-center">github</div>
</a>
</li>
<li>
<a
class="hover:underline flex justify-start"
href="https://twitter.com/spr_networks"
>
<div
class="inline-flex w-5 h-5 pl-6 bg-no-repeat bg-[url(/assets/img/twitter.svg)] dark:invert dark:opacity-70"
></div>
<div class="inline-flex align-self-center">spr_networks</div>
</a>
</li>
<li>
<a
class="hover:underline flex justify-start"
href="https://discord.gg/EUjTKJPPAX"
>
<div
class="inline-flex w-5 h-5 pl-6 bg-no-repeat bg-[url(/assets/img/discord.svg)] dark:invert dark:opacity-70"
></div>
<div class="inline-flex align-self-center">Discord</div>
</a>
</li>
</ul>
</footer>
<script>
let el = document.getElementById('trigger-mobile-menu')
el.addEventListener('click', function () {
let menu = document.getElementById('mobile-menu')
menu.classList.toggle('hidden')
})
</script>
</body>
</html>