-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
411 lines (390 loc) · 20.7 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
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
<!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" />
<title>Sygnet</title>
<meta name="description" content="" />
<link rel="apple-touch-icon" sizes="57x57" href="img/fav/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/fav/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/fav/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/fav/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/fav/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/fav/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/fav/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/fav/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/fav/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/fav/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/fav/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/fav/favicon-16x16.png">
<link rel="manifest" href="img/fav/manifest.json">
<meta name="msapplication-TileColor" content="#8042ff">
<meta name="msapplication-TileImage" content="img/fav/ms-icon-144x144.png">
<meta name="theme-color" content="#8042ff">
<link href="css/bootstrap-grid.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<header class="bg-blue">
<div class="container d-flex justify-content-between">
<div id="logotype">
<a href="index.html" title="Sygnet" class="d-flex">
<img class="img-fluid" src="img/logo.svg" alt="Sygnet">
<span><img class="img-fluid" src="img/sygnet.svg" alt="Sygnet"></span>
</a>
</div>
<div id="toggler">
<div class="lines">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<div id="menu">
<div class="d-flex flex-column flex-lg-row align-items-center">
<a href="e-receipts.html" title="e-Receipts">e-Receipts</a>
<a href="ssi.html" title="Self-Sovereign Identity">Self-Sovereign Identity</a>
<a href="road-map.html" title="Road Map">Road Map</a>
<a href="news.html" title="News">News</a>
<a href="team.html" title="Team">Team</a>
<a href="contact.html" title="Contact">Contact</a>
</div>
</div>
</div>
</header>
<section id="home" class="d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-5 offset-md-1 d-flex">
<div class="text-inner">
<h1 class="c-blue">Own Your<br>Digital Self</h1>
<p>Sygnet is a next-generation identity management tool for truly secure handling of user’s sensitive, personal data.</p>
<a href="#mission" class="btn c-white">Learn more</a>
</div>
</div>
<div class="col-sm-12 col-md-5">
<img id="paralax1" class="img-fluid" src="img/own-your-digital-self.png" alt="Own Your Digital Self">
</div>
</div>
</div>
</section>
<section id="mission" class="bg-darker d-flex align-items-center" data-aos="change-bg" data-aos-anchor="#after">
<div class="container">
<div id="before"></div>
<div class="text-inner">
<div class="pre-title c-grey" data-aos="fade-up" data-aos-anchor="#before">Our mission</div>
<p class="bigger c-white" data-aos="fade-up">Sygnet allows users to have full control over their digital identity by radically changing the way identity works in the online world.</p>
<a href="#ssi" class="btn btn-white c-blue" data-aos="fade-up">Learn how</a>
</div>
</div>
</section>
<div id="after"></div>
<section id="ssi">
<div class="first-section bg-darker" data-aos="change-bg" data-aos-anchor="#after">
<div class="container">
<div class="pre-title text-center" data-aos="fade-up">Digital Identity re-invented</div>
<h2 class="text-center c-white" data-aos="fade-up">Self-Sovereign Identity (SSI)</h2>
<div class="row">
<div class="col-md-12 col-lg-10 offset-lg-1">
<img class="img-fluid" src="img/ssi.png" alt="Self-Sovereign Identity">
</div>
</div>
</div>
</div>
<div class="second-section">
<div class="container-fluid px-0">
<div class="container">
<div class="d-flex">
<div class="text-inner text-center">
<h3 class="c-blue" data-aos="fade-up">Identity breaches and hacks</h3>
<p data-aos="fade-up">The current internet identity model, with its massive honeypots of corporate-stored personal data, is slowly running its course. Vast numbers of data breaches and hacks are proving this over and over again - we should not entrust sensitive personal data to third parties, regardless of their intent, scale or technical capabilities.</p>
<a href="#solution" class="btn c-white" data-aos="fade-up">Find out more about SSI</a>
</div>
</div>
</div>
</div>
<div class="space"></div>
<div id="solution" class="container-fluid px-0">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-10 offset-lg-1">
<div class="row flex-row-reverse">
<div class="col-md-12 col-lg-6 d-flex">
<div class="text-inner right">
<h3 class="c-blue" data-aos="fade-up">Our solution is SSI</h3>
<p data-aos="fade-up">Enter SSI, the closest digital sibling to the kind of identity we used to have before our lives migrated online. Manifesting only in distinct user’s interactions, SSI effects only you and the person or entity you interact with - no intermediaries ever hold or administrate your data.</p>
<a href="#details" class="btn c-blue empty" data-aos="fade-up"><img class="img-fluid" src="img/arrow.svg" alt="">More about SSI</a>
</div>
</div>
</div>
</div>
</div>
</div>
<img class="img-fluid abs abs2" src="img/solution-is-ssi.png" alt="SSI">
</div>
</div>
</section>
<section id="details" class="bg-dark d-flex align-items-center">
<div class="container">
<h3 class="text-center c-white" data-aos="fade-up">SSI in details</h3>
<div class="space"></div>
<div class="row" data-aos="fade-up">
<div class="col-sm-12 col-md-4">
<h5 class="c-white">The missing layer <br>of the Internet</h5>
</div>
<div class="col-sm-12 col-md-4">
<p class="c-grey">It is quite baffling how we have managed to get to this stage without a transparent, functional internet identity layer. The trade-off to that is a patchwork of centralized silos holding millions of identity records, managed behind closed doors with very little accountability. This data is regularly traded and monetized without our consent.</p>
</div>
<div class="col-sm-12 col-md-4">
<p class="c-grey">What is worse, however, is the sheer amount of data theft and leakage this model provokes. Each and every silo (apps, SM accounts etc) has to be guarded separately which, given the numbers at hand, proves impossible.</p>
</div>
</div>
<div class="space"></div>
<div class="row" data-aos="fade-up">
<div class="col-sm-12 col-md-4">
<h5 class="c-white">SSI flips this model <br>upside down</h5>
</div>
<div class="col-sm-12 col-md-4">
<p class="c-grey">The user becomes the custodian and sole administrator of his/hers identity and can reveal parts of it when needed, much like using paper documents we would carry around in the non-digital domain.</p>
</div>
<div class="col-sm-12 col-md-4">
<p class="c-grey">Thus, SSI allows you to claim something to be true and then prove it with the signature of a trusted third-party.</p>
</div>
</div>
</div>
</section>
<section id="features" class="bg-darker text-center d-flex align-items-center">
<div class="container">
<h3 class="c-white" data-aos="fade-up">SSI offers digital identity<br>with these characteristics:</h3>
<div class="row">
<div class="col-sm-12 col-md-4" data-aos="fade-up">
<img class="img-fluid icon" src="img/protecting_your_privacy_ico.svg" alt="privacy">
<h5 class="c-white">It protects your privacy</h5>
<p class="c-grey">You reveal only what is needed, and do it P2P.</p>
</div>
<div class="col-sm-12 col-md-4" data-aos="fade-up" data-aos-delay="50">
<img class="img-fluid icon" src="img/its_safe_ico.svg" alt="safe">
<h5 class="c-white">It's safe</h5>
<p class="c-grey">You're no longer affected by mass-scale data leaks</p>
</div>
<div class="col-sm-12 col-md-4" data-aos="fade-up" data-aos-delay="100">
<img class="img-fluid icon" src="img/truly_yours_ico.svg" alt="truly yours">
<h5 class="c-white">It's truly yours</h5>
<p class="c-grey">Nobody can take your identity away from you</p>
</div>
</div>
<div class="space"></div>
<a href="#cases" class="btn c-white empty centered" data-aos="fade-up"><img class="img-fluid" src="img/arrow-white.svg" alt="">See possible use cases</a>
</div>
</section>
<section id="cases">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-4 offset-lg-1">
<h3 class="c-blue" data-aos="fade-up">Possible SSI <br>use cases</h3>
</div>
<div class="col-md-12 col-lg-6">
<div class="case d-flex align-items-center" data-aos="fade-up">
<div class="image">
<img class="img-fluid icon" src="img/digital_receipts.svg" alt="Digital receipts">
</div>
<div class="desc">
<h5 class="c-blue">Digital receipts</h5>
<p>Documents issued by shops and transferred directly to the consumers.</p>
</div>
</div>
<div class="case d-flex align-items-center" data-aos="fade-up">
<div class="image">
<img class="img-fluid icon" src="img/efficient_kyc_ico.svg" alt="">
</div>
<div class="desc">
<h5 class="c-blue">Efficient KYC</h5>
<p>While purchasing tickets to prevent frauds and price speculations.</p>
</div>
</div>
<div class="case d-flex align-items-center" data-aos="fade-up">
<div class="image">
<img class="img-fluid icon" src="img/instant_user_id_ico.svg" alt="Instant user identification">
</div>
<div class="desc">
<h5 class="c-blue">Instant user identification</h5>
<p>Unforgeable user identification while contacting a service (e.g. a bank) via telephone.</p>
</div>
</div>
<div class="case d-flex align-items-center" data-aos="fade-up">
<div class="image">
<img class="img-fluid icon" src="img/data_processing_consent_ico.svg" alt="Data processing consent">
</div>
<div class="desc">
<h5 class="c-blue">Data processing consent</h5>
<p>Managing your consent to personal data processing, as required by GDPR.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="digital">
<div class="first-section bg-blue">
<div class="container">
<div class="pre-title text-center" data-aos="fade-up">Glimpse into the future</div>
<h2 class="text-center c-white" data-aos="fade-up">Digital Receipts</h2>
<div class="row">
<div class="col-md-12 col-lg-10 offset-lg-1">
<img class="img-fluid" src="img/digital-receipts.png" alt="sygnet">
</div>
</div>
</div>
</div>
<div class="second-section">
<div class="container-fluid">
<div class="container">
<div class="d-flex">
<div class="text-inner text-center">
<h3 class="c-blue" data-aos="fade-up">Within a couple of years receipts will be digitalized</h3>
<p data-aos="fade-up">The question is: how will it happen? Our shopping history contains very precious data. Will this data be stored in a third party database or will it be under your control?</p>
<a href="#benefits" class="btn c-white" data-aos="fade-up">Learn about e-receipts</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="benefits" class="bg-darker d-flex align-items-center text-center">
<div class="container">
<h3 class="c-white" data-aos="fade-up">Benefits of e-receipts</h3>
<div class="intro c-grey" data-aos="fade-up">
We use the SSI paradigm to digitalize receipts in a way that utilizes the data contained in them but without compromising the consumer's privacy.
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<img class="img-fluid icon" src="img/consumers_ico.svg" alt="Consumers">
<h5 class="c-white">Consumers</h5>
<p class="c-grey">Consumers are happy because their receipts are secure and handy.</p>
</div>
<div class="col-sm-12 col-md-4" data-aos="fade-up" data-aos-delay="50">
<img class="img-fluid icon" src="img/shops_ico.svg" alt="Shops">
<h5 class="c-white">Shops</h5>
<p class="c-grey">Shops are happy because their loyalty programs become easy.</p>
</div>
<div class="col-sm-12 col-md-4" data-aos="fade-up" data-aos-delay="100">
<img class="img-fluid icon" src="img/the_state_ico.svg" alt="The State">
<h5 class="c-white">The State</h5>
<p class="c-grey">The State is happy because more receipts mean less tax frauds.</p>
</div>
</div>
<div class="space"></div>
<!--a href="#involved" class="btn c-white centered" data-aos="fade-up">Get involved</a-->
</div>
</section>
<section id="growth" class="bg-blue text-center">
<div class="container">
<div class="pre-title" data-aos="fade-up">Where it all leads us</div>
<h2 class="text-center c-white" data-aos="fade-up">Growth potential</h2>
<div class="intro bigger c-white" data-aos="fade-up">
Digital receipts, when done in the SSI paradigm, are just a first step in the process of building a much bigger system.
</div>
<a href="#more" class="btn empty c-white centered" data-aos="fade-up"><img class="img-fluid" src="img/arrow-white.svg" alt="">Tell me how</a>
<div class="image">
<img class="img-fluid" src="img/growth-potencial.png" alt="Growth potential">
</div>
<div id="more" class="row" data-aos="fade-up">
<div class="col-sm-12 col-md-4">
<h5 class="c-white">Monetize Yourself</h5>
<p class="c-white">The current trade-off between privacy and convenience is no longer needed. You can have both - and you can sell your data on your terms.</p>
</div>
<div class="col-sm-12 col-md-4">
<h5 class="c-white">SSI Agent</h5>
<p class="c-white">Artificial Intelligence that works strictly on behalf and in the interest of the user. AI is meant to serve you and if it fails, you can easily replace it.</p>
</div>
<div class="col-sm-12 col-md-4">
<h5 class="c-white">Intentions Matching</h5>
<p class="c-white">Evolution into a comprehensive system of digital identity that also includes expressing and matching people's intentions.</p>
</div>
</div>
</div>
</section>
<section id="involved" class="min">
<div class="container text-center">
<h2 class="c-white" data-aos="fade-up">Get Involved</h2>
<p data-aos="fade-up">If you share our vision and want to partner <br>with us - get in touch.</p>
<form class="" action="" method="post" data-aos="fade-up">
<div class="input-group">
<input type="text" name="email" value="" placeholder="E-mail address">
</div>
<button type="submit" name="button" class="btn btn-white c-blue">Get in touch</button>
</form>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-4">
<img class="img-fluid foot-logo" src="img/sygnet-logo.svg" alt="sygnet">
</div>
<div class="col-md-12 col-lg-8">
<div class="row">
<div class="col-sm-3">
<h5 class="c-white">Technology</h5>
<ul class="foot-menu">
<li><a href="ssi.html" title="SSI">SSI</a></li>
<li><a href="e-receipts.html" title="E-receipts">E-receipts</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5 class="c-white">Company</h5>
<ul class="foot-menu">
<li><a href="road-map.html" title="Road map">Road map</a></li>
<li><a href="news.html" title="News">News</a></li>
<li><a href="team.html" title="Team">Team</a></li>
<li><a href="" class="disabled" title="Jobs">Jobs</a></li>
<li><a href="oferty.html" title="Zapytania ofertowe">Zapytania ofertowe</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5 class="c-white">Social Media</h5>
<ul class="foot-menu">
<li><a href="https://www.linkedin.com/company/sygnetai" title="LinkedIn" target="_blank">LinkedIn</a></li>
<li><a href="https://www.facebook.com/Sygnetai" title="Facebook" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/Sygnet_ai" title="Twitter" target="_blank">Twitter</a></li>
<li><a href="https://t.me/Sygnet_ai" title="Telegram" target="_blank">Telegram</a></li>
<li><a href="https://www.youtube.com/channel/UCUD9TddYHaCk6SIXIW6fDqg" title="YouTube" target="_blank">YouTube</a></li>
</ul>
</div>
<div class="col-sm-3">
<h5 class="c-white">Blog</h5>
<ul class="foot-menu">
<li><a href="https://medium.com/@sygnet.ai" title="Medium" target="_blank">Medium</a></li>
<li><a href="https://www.reddit.com/user/Sygnet_ai/" title="Reddit" target="_blank">Reddit</a></li>
<li><a href="https://steemit.com/@sygnetproject" title="Steem" target="_blank">Steem</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="copy">
<div class="c-grey">Copyrights © 2019 Sygnet</div>
</div>
</div>
</footer>
<script>
var paralax1 = document.querySelector("#paralax1");
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
window.addEventListener("DOMContentLoaded", scrollLoop, false);
var xScrollPosition;
var yScrollPosition;
function scrollLoop() {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
setTranslate(0, yScrollPosition * 0.12, paralax1);
requestAnimationFrame(scrollLoop);
}
</script>
<script src="js/scripts.js"></script>
<script src="js/main.js"></script>
</body>
</html>