-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
172 lines (166 loc) · 12 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relaycorp</title>
<!-- Meta tags for SEO -->
<meta name="description" content="Relaycorp is incubating technologies to solve humanity's most pressing and neglected communication challenges, starting with Internet blackouts.">
<meta name="keywords" content="Awala, Letro, VeraId, Despacito, censorship, Internet blackouts, Internet shutdowns, DDoS attacks">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon/favicon-48x48.png" sizes="48x48" />
<link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
<link rel="shortcut icon" href="favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
<link rel="manifest" href="favicon/site.webmanifest" />
<!-- Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com?v=3.3.2"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
color: #fff;
h1, h2, h3, h4 {
font-family: 'Poppins', sans-serif;
}
}
</style>
<script src="https://cdn.usefathom.com/script.js" data-site="QLREBPLC" defer></script>
</head>
<body class="bg-[#000003]">
<!-- Header section -->
<header class="w-full pt-3 lg:pt-8">
<div class="container mx-auto h-24 flex items-center justify-center">
<img src="images/relaycorp-logo.png" alt="Relaycorp Logo" class="h-8 lg:h-16">
</div>
</header>
<!-- Hero section -->
<section class="pt-4 md:pt-14">
<h1 class="text-3xl md:text-6xl lg:text-[76px] px-8 font-bold text-center leading-normal lg:leading-normal">Tackling the most pressing and neglected
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-blue-700">communication problems</span></h1>
<div>
<img src="images/hero-bg.png" alt="Global network illustration"
class="w-full h-auto object-cover">
</div>
</section>
<!-- About Relaycorp section -->
<section class="bg-[#00020A]">
<div class="max-w-7xl mx-auto pb-16 px-8 pt-3 text-slate-400">
<h2 class="text-3xl md:text-7xl font-bold text-center mb-8 text-slate-200">About Relaycorp</h2>
<p class="mb-10 md:mb-16 text-lg md:text-2xl text-center max-w-6xl mx-auto lg:leading-relaxed">We’re incubating the following technologies to pave the way for solving some of humanity’s most pressing and neglected communication challenges, starting with Internet blackouts:</p>
<!-- Awala -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 text-lg">
<a href="https://awala.network/" target="_blank" class="block bg-slate-900 p-10 rounded-lg border border-slate-700 transition-colors duration-300 hover:bg-[#19233B]">
<div class="flex items-start">
<div class="w-full">
<div class="flex items-center mb-2">
<img src="images/awala-icon.png" alt="Awala Letro" class="w-12 h-12 mr-3">
<h3 class="text-3xl font-semibold mb-2 text-slate-200">Awala</h3>
</div>
<p class="mb-2">A new computer network where apps can communicate with and without the Internet. It also offers end-to-end encryption and spam protection.</p>
<span class="font-semibold text-blue-500 inline-flex items-center mt-4">
Learn more about Awala
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</span>
</div>
</div>
</a>
<!-- Letro -->
<a href="https://letro.app/en/" target="_blank" class="block bg-slate-900 p-10 rounded-lg border border-slate-700 transition-colors duration-300 hover:bg-[#19233B]">
<div class="flex items-start">
<div class="w-full">
<div class="flex items-center mb-2">
<img src="images/letro-icon.png" alt="Letro Logo" class="w-12 h-12 mr-3">
<h3 class="text-3xl font-semibold mb-2 text-slate-200">Letro</h3>
</div>
<p class="mb-2">An Awala-powered email alternative, so it works with and without the Internet, supports end-to-end encryption, and is spam-resistant.</p>
<span class="font-semibold text-blue-500 inline-flex items-center mt-4">
Learn more about Letro
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</span>
</div>
</div>
</a>
<!-- VeraId -->
<a href="https://veraid.net/" target="_blank" class="block bg-slate-900 p-10 rounded-lg border border-slate-700 transition-colors duration-300 hover:bg-[#19233B]">
<div class="flex items-start">
<div class="w-full">
<div class="flex items-center mb-2">
<img src="images/veraid-icon.png" alt="VeraId Logo" class="w-12 h-12 mr-3">
<h3 class="text-3xl font-semibold mb-2 text-slate-200">VeraId</h3>
</div>
<p class="mb-2">An offline authentication protocol that allows data to be securely attributed to domain names (e.g. example.com) and users (e.g. [email protected]). VeraId powers Letro.</p>
<span class="font-semibold text-blue-500 inline-flex items-center mt-4">
Learn more about VeraId
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</span>
</div>
</div>
</a>
<!-- Despacito -->
<a href="https://despacito.bot/" target="_blank" class="block bg-slate-900 p-10 rounded-lg border border-slate-700 transition-colors duration-300 hover:bg-[#19233B]">
<div class="flex items-start">
<div class="w-full">
<div class="flex items-center mb-2">
<h3 class="text-3xl font-semibold mb-2 text-slate-200">Despacito</h3>
</div>
<p class="mb-2">A rate limiting protocol that mitigates DDoS attacks. It’s based on the research we did for the DDoS Report.</p>
<span class="font-semibold text-blue-500 inline-flex items-center mt-4">
Learn more about Despacito
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</span>
</div>
</div>
</a>
</div>
</section>
<!-- About Gus section -->
<div class="bg-[#00020A] text-center pb-16 px-8 text-xl lg:text-2xl space-y-4 text-slate-400">
<p>Relaycorp, Inc. is a Delaware corporation. </p>
<p><a class="underline text-blue-400 hover:text-blue-300" href="https://gus.engineer/" target="_blank">Gus Narea</a> is the founder and CEO.</p>
</div>
<!-- Contact section -->
<section class="bg-[#0C1325] mx-auto space-y-8 text-center py-16 px-8 lg:px-40 text-slate-300">
<h2 class="text-3xl md:text-7xl font-bold text-slate-200">Contact</h2>
<p class="max-w-5xl mx-auto text-xl md:text-2xl md:leading-relaxed">
If you wish to contact us, please email
<a href="mailto:[email protected]" class="text-blue-400 hover:text-blue-300 underline">[email protected]</a>
and make sure to include the word "relaying" somewhere in the email (if you don't, it'll be automatically deleted).
</p>
<!-- Social media icons -->
<div class="flex justify-center space-x-8 py-8">
<a href="https://x.com/RelaycorpHQ/"
aria-label="Relaycorp Twitter Channel"
class="text-slate-400 hover:text-slate-500 transition-colors duration-300">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
</svg>
</a>
<a href="https://www.linkedin.com/company/relaycorp/"
aria-label="Relaycorp LinkedIn Channel"
class="text-slate-400 hover:text-slate-500 transition-colors duration-300">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd"></path>
</svg>
</a>
<a href="https://www.youtube.com/@relaycorp"
aria-label="Relaycorp YouTube Channel"
class="text-slate-400 hover:text-slate-500 transition-colors duration-300">
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</section>
</body>
</html>