-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (219 loc) · 17.1 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
<!DOCTYPE html>
<html data-theme="cupcake" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ethereum Localization Service</title>
<meta name="description" content="" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/darkfavicon.svg" media="(prefers-color-scheme: dark)" />
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://0xl10n.org/"/>
<meta property="og:type" content="website" />
<meta property="og:title" content="Ethereum Localization Service" />
<meta property="og:description" content="" />
<meta property="og:image" content="/og-cover.png" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="0xl10n.org" />
<meta property="twitter:url" content="https://0xl10n.org/" />
<meta name="twitter:title" content="Ethereum Localization Service" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="/og-cover.png" />
</head>
<body class="bg-white dark:bg-gray-900 dark:before:fixed dark:before:-z-50 dark:before:inset-0 dark:before:bg-gray-950/50">
<header>
<nav class="fixed overflow-hidden z-20 w-full bg-white/80 dark:bg-gray-950/0 dark:shadow-md rounded-b-lg dark:shadow-gray-950/10 border-b border-[--ui-light-border-color] border-x dark:border-[--ui-dark-border-color] backdrop-blur-2xl">
<div class="px-6 m-auto max-w-6xl 2xl:px-0">
<div class="flex flex-wrap items-center justify-between py-2 sm:py-4">
<div class="w-full items-center flex justify-between lg:w-auto">
<a id="logo" href="/" aria-label="logo">
Ethereum Localization Service
</a>
<div class="flex lg:hidden">
<button aria-label="humburger" id="menu" class="relative border bordeer-gray-950/30 dark:border-white/20 size-9 rounded-full transition duration-300 active:scale-95">
<div aria-hidden="true" id="line1" class="m-auto h-[1.5px] w-4 rounded bg-gray-900 transition duration-300 dark:bg-gray-300"></div>
<div aria-hidden="true" id="line2" class="m-auto mt-1.5 h-[1.5px] w-4 rounded bg-gray-900 transition duration-300 dark:bg-gray-300"></div>
</button>
</div>
</div>
<div class="w-full h-0 lg:w-fit flex-wrap justify-end items-center space-y-8 lg:space-y-0 lg:flex lg:h-fit md:flex-nowrap">
<div class="mt-6 text-gray-600 dark:text-gray-300 md:-ml-4 lg:pr-4 lg:mt-0">
<ul class="space-y-6 tracking-wide text-base lg:text-sm lg:flex lg:space-y-0">
<li>
<a href="#how-it-works" class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Product</span>
</a>
</li>
<li>
<a href="#subscribe-form" class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Follow Us</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
<main class="overflow-hidden">
<section class="relative">
<div class="relative pt-24 lg:pt-28">
<div class="mx-auto px-6 max-w-7xl md:px-12">
<div class="text-center sm:mx-auto sm:w-10/12 lg:mr-auto lg:mt-0 lg:w-4/5">
<h1 class="mt-8 text-wrap text-4xl md:text-5xl font-semibold text-gray-950 dark:text-white xl:text-5xl xl:[line-height:1.125]">Engage Next billion users of Ethereum <br/> in their languages
<p class="text-wrap mx-auto mt-8 max-w-2xl text-lg text-neutral-content dark:text-gray-300 hidden sm:block">A decentralised translation network with AI & human attestors</p>
<div class="mt-8 flex flex-col items-center justify-center gap-4">
<div class="p-1 rounded-[calc(var(--btn-border-radius)+4px)] bg-gray-950/5 border dark:border-white/10 dark:bg-white/5">
<a
href="#subscribe-form"
class="*:select-none dark:shadow-primary-500/10 *:disabled:opacity-20 disabled:*:text-gray-300 disabled:dark:*:text-neutral-content dark:*:disabled:!text-white group relative z-[1] flex h-11 items-center justify-center gap-1.5 rounded-[--btn-border-radius] border border-primary-600 bg-primary-500 px-4 text-base text-white shadow-md shadow-primary-200 before:absolute before:inset-0 before:rounded-[calc(var(--btn-border-radius)-1px)] before:border before:border-primary-500 before:bg-gradient-to-b before:from-primary-600 hover:bg-primary-600 active:bg-primary-700 disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-950/40 disabled:before:border-transparent disabled:before:bg-gray-100 disabled:before:from-transparent dark:border-0 dark:bg-primary-600 dark:before:border-0 dark:before:border-t dark:before:border-primary-400 dark:before:shadow-inner dark:before:shadow-white/10 dark:hover:bg-primary-700 dark:active:bg-primary-800 dark:active:before:from-primary-700 dark:disabled:border dark:disabled:border-gray-800/50 disabled:dark:bg-gray-900 dark:disabled:before:bg-gray-900 dark:disabled:before:from-gray-900 dark:disabled:before:shadow-none [&>*:not(.sr-only)]:relative"
>
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M3.75 5.25L3 6V18L3.75 18.75H20.25L21 18V6L20.25 5.25H3.75ZM4.5 7.6955V17.25H19.5V7.69525L11.9999 14.5136L4.5 7.6955ZM18.3099 6.75H5.68986L11.9999 12.4864L18.3099 6.75Z" fill="#ffffff"/>
</svg>
<span class="text-nowrap">Get Updates</span></a
>
</div>
<button class="hidden *:select-none *:disabled:opacity-20 dark:*:disabled:!text-white dark:hover:bg-gray-500/15 group h-9 items-center justify-center gap-1.5 rounded-[--btn-border-radius] bg-gray-100 px-3 text-base text-gray-800 hover:bg-gray-200/75 active:bg-gray-100 disabled:border disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-950 dark:bg-gray-500/10 dark:text-gray-300 dark:active:bg-gray-500/10 dark:disabled:border-gray-800/50 disabled:dark:bg-gray-900 [&>*:not(.sr-only)]:relative">
<span class="text-sm">Learn more</span>
<svg class="-mr-1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="4" d="m19 12l12 12l-12 12"/></svg>
</button>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="pt-36">
<div class="mx-auto px-6 max-w-6xl text-gray-500">
<div class="relative">
<div class="relative z-10 grid gap-3 grid-cols-6">
<div class="col-span-full sm:col-span-3 lg:col-span-2 overflow-hidden relative p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div>
<div class="flex pt-6 lg:px-6 content-center justify-center">
<img class="object-contain" src="/assets/community.svg" alt="">
</div>
<div class="mt-14 text-center relative z-10 space-y-2">
<h2 class="text-lg font-medium text-gray-800 transition group-hover:text-secondary-950 dark:text-white">Engage your community</h2>
<p class="dark:text-gray-300 text-neutral-content">Incentive contributions by social recognitions and retroactive funding</p>
</div>
</div>
</div>
<div class="col-span-full sm:col-span-3 lg:col-span-2 overflow-hidden relative p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div>
<div class="flex pt-6 lg:px-6 content-center justify-center">
<img class="object-contain" src="/assets/globe.svg" alt="">
</div>
<div class="mt-14 text-center relative z-10 space-y-2">
<h2 class="text-lg font-medium text-gray-800 transition group-hover:text-secondary-950 dark:text-white">Grow internationally</h2>
<p class="dark:text-gray-300 text-neutral-content">Time for engaging the non-english speaking world.</p>
</div>
</div>
</div>
<div class="col-span-full sm:col-span-3 lg:col-span-2 overflow-hidden relative p-[--card-padding] rounded-[--card-border-radius] bg-white border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] dark:bg-[--card-dark-bg]">
<div>
<div class="pt-6 lg:px-6 content-center justify-center flex">
<img class="object-contain" src="/assets/heart.svg" alt="">
</div>
<div class="mt-14 text-center relative z-10 space-y-2">
<h2 class="text-lg font-medium text-gray-800 transition group-hover:text-secondary-950 dark:text-white">Public Goods</h2>
<p class="dark:text-gray-300 text-neutral-content">Translation are done on a credibility netural protocol</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="how-it-works">
<div class="pt-36">
<div class="mx-auto px-6 max-w-6xl text-gray-500">
<div class="text-center">
<h2 class="text-3xl text-gray-950 dark:text-white font-semibold">How it works?</h2>
<p class="mt-6 text-neutral-content dark:text-gray-300">A <b>protocol of reputation</b> system-based cryptoecon mechanisms <br>with decentralized toolings and computer power <b>enabling community and AI pipelines</b> <br>to support localization across software and content in the Ethereum ecosystems</p>
<p><a href="https://docs.google.com/presentation/d/1xtGcFLisc06wT81VOYeJTgy9Vxp6hP9uyBX7rRj7-64/edit#slide=id.g85cf8b5f36_0_6059">Check out our latest presentation.</a></p>
</div>
<div class="mt-12 relative h-fit sm:mx-auto sm:px-0 -mx-6 px-6 overflow-x-auto">
<div class="flex">
<img class="object-contain" src="/assets/explanation.png" alt="">
</div>
</div>
</div>
</div>
</section>
<section>
<div class="pt-36 pb-36">
<div class="mx-auto px-6 max-w-6xl text-gray-500">
<div class="text-center">
<h2 class="text-3xl text-gray-950 dark:text-white font-semibold">Trusted By the Community</h2>
</div>
<div class="mt-12 max-w-lg mx-auto flex justify-center flex-wrap gap-3">
<a href="https://attest.org/" target="_blank" title="Ethereum Attestation Service">
<img alt="John Doe" src="https://substack-post-media.s3.amazonaws.com/public/images/dd91647e-568a-4472-8b00-bff1ea5cb20a_1662x704.png" loading="lazy" width="360" height="360">
</a>
</div>
</div>
</div>
</section>
<section id="subscribe-form">
<iframe src="https://embeds.beehiiv.com/ad663234-5ca1-486c-8b15-6e4137294c18" data-test-id="beehiiv-embed" width="100%" height="320" frameborder="0" scrolling="no" style="border-radius: 4px; border: 2px solid #e5e7eb; margin: 0; background-color: transparent;"></iframe>
</section>
</main>
<footer class="rounded-xl border border-[--ui-light-border-color] dark:border-[--ui-dark-border-color]">
<div class="max-w-6xl mx-auto space-y-16 px-6 py-16 text-gray-600 2xl:px-0">
<div class="flex flex-wrap items-center justify-between gap-4 border-b pb-8 border-[--ui-light-border-color] dark:border-[--ui-dark-border-color]">
<a href="/" aria-label="logo">
© 2024 Ethereum Localization Service
</a>
<div class="flex gap-3">
<a href="https://twitter.com/0xl10n" target="blank" aria-label="twitter" class="size-8 flex *:m-auto rounded-[--btn-border-radius] text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">
<svg class="size-5" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="currentColor" d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z"/>
</svg>
</svg>
</a>
<a href="https://t.me/+jh97fLVbCSkwMTE1" target="blank" aria-label="medium" class="size-8 flex *:m-auto rounded-[--btn-border-radius] text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">
<svg class="size-5" width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" strokeWidth="0"/>
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path fillRule="evenodd" clipRule="evenodd" d="M23.1117 4.49449C23.4296 2.94472 21.9074 1.65683 20.4317 2.227L2.3425 9.21601C0.694517 9.85273 0.621087 12.1572 2.22518 12.8975L6.1645 14.7157L8.03849 21.2746C8.13583 21.6153 8.40618 21.8791 8.74917 21.968C9.09216 22.0568 9.45658 21.9576 9.70712 21.707L12.5938 18.8203L16.6375 21.8531C17.8113 22.7334 19.5019 22.0922 19.7967 20.6549L23.1117 4.49449ZM3.0633 11.0816L21.1525 4.0926L17.8375 20.2531L13.1 16.6999C12.7019 16.4013 12.1448 16.4409 11.7929 16.7928L10.5565 18.0292L10.928 15.9861L18.2071 8.70703C18.5614 8.35278 18.5988 7.79106 18.2947 7.39293C17.9906 6.99479 17.4389 6.88312 17.0039 7.13168L6.95124 12.876L3.0633 11.0816ZM8.17695 14.4791L8.78333 16.6015L9.01614 15.321C9.05253 15.1209 9.14908 14.9366 9.29291 14.7928L11.5128 12.573L8.17695 14.4791Z" fill="currentColor"/> </g>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script type="module" src="./main.js"></script>
<script type="module">
import Swiper from 'swiper/bundle';
import { Pagination } from 'swiper/modules';
import 'swiper/css/bundle';
import 'swiper/css/pagination';
import 'swiper/css/effect-cards'
const swiper = new Swiper('.proofSlides', {
effect: "cube",
cubeEffect : {
slideShadows: false,
shadow: false,
shadowOffset: 20,
shadowScale: 0.94,
},
loop: true,
autoplay : {
delay: 3000,
duration : 500
},
grabCursor: true,
modules: [Pagination],
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
}
});
</script>
</body>
</html>