-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
379 lines (352 loc) · 39.3 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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenLocus</title>
<meta name="description" content="OpenLocus" />
<link rel="icon" type="image/svg+xml" href="/logo-favicon.png" media="(prefers-color-scheme: light)" />
<link rel="icon" type="image/svg+xml" href="/logo-favicon.png" media="(prefers-color-scheme: dark)" />
<!-- Facebook Meta Tags -->
<!-- <meta property="og:url" content="https://ada.tailus.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="WebSharper" />
<meta property="og:description" content="Modern landing page built with tailus themer" />
<meta property="og:image" content="/og-cover.png" /> -->
<!-- Twitter Meta Tags -->
<!-- <meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="ada.tailus.io" />
<meta property="twitter:url" content="https://ada.tailus.io/" />
<meta name="twitter:title" content="Tailus Ada" />
<meta name="twitter:description" content="Modern landing page built with tailus themer" />
<meta name="twitter:image" content="/og-cover.png" /> -->
<script type="module" crossorigin src="/assets/index-B93jGrrF.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-cNjKD7Bg.css">
</head>
<body class="bg-white dark:bg-gray-950">
<header>
<nav
class="fixed overflow-hidden z-20 w-full bg-white/80 dark:bg-gray-950/75 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">
<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 href="/" aria-label="openlocus logo">
<img src="/logo.png" alt="tailus logo" class="h-8 w-auto" />
</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="#"
class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Blogs</span>
</a>
</li> -->
<li>
<a href="#projects"
class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Our Work</span>
</a>
</li>
<li>
<a href="#get-in-touch"
class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Get in Touch</span>
</a>
</li>
<!-- <li>
<a href="#integrations"
class="block md:px-4 transition hover:text-primary-600 dark:hover:text-primary-400">
<span>Integration</span>
</a>
</li> -->
</ul>
</div>
<!-- <div
class="w-full space-y-2 gap-2 pt-6 pb-4 lg:pb-0 border-t border-[--ui-light-border-color] dark:border-[--ui-dark-border-color] items-center flex flex-col lg:flex-row lg:space-y-0 lg:w-fit lg:border-t-0 lg:pt-0 lg:pl-2">
<button
class="w-full h-9 lg:w-fit group flex items-center relative border rounded-[--btn-border-radius] *:select-none [&>*:not(.sr-only)]:relative before:rounded-[calc(var(--btn-border-radius)-1px)] before:absolute before:inset-0 before:border before:bg-gradient-to-b *:disabled:opacity-20 disabled:text-gray-950/40 disabled:border-gray-200 disabled:bg-gray-100 disabled:*:text-gray-300 disabled:before:border-transparent disabled:before:bg-gray-100 disabled:before:from-transparent dark:border-0 dark:before:border-0 dark:before:border-t dark:before:shadow-inner dark:disabled:border dark:disabled:border-gray-800/50 disabled:dark:bg-gray-900 disabled:dark:*:text-gray-700 dark:disabled:before:bg-gray-900 dark:disabled:before:from-gray-900 dark:disabled:before:shadow-none dark:*:disabled:!text-white text-white border-gray-950 bg-gray-600 before:border-gray-600 before:from-gray-800 hover:bg-gray-900 active:bg-gray-950 dark:text-gray-950 dark:before:border-gray-200 dark:before:from-gray-200 dark:bg-white dark:before:shadow-white/10 dark:hover:bg-gray-100 dark:active:bg-gray-300 dark:active:before:from-gray-200 lg:text-sm lg:h-8 px-3 justify-center">
<a href="#get-in-touch">
<span>Get in Touch</span>
</a>
</button>
</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">
<a href="https://arxiv.org/abs/2402.13610"
class="border w-fit mx-auto flex justify-between items-center transition duration-200 rounded-[--annonce-border-radius] border-[--ui-light-border-color] hover:border-[--ui-light-border-hover-color] dark:border-[--ui-dark-border-color] dark:hover:border-[--ui-dark-border-hover-color] p-1 group gap-2">
<span
class="block text-sm px-2 py-0.5 rounded-[calc(var(--annonce-border-radius)-0.375rem)] text-white bg-primary-600">New</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300 flex gap-6">
Our work on Data-Driven Discovery is out now!
<div
class="flex items-center -space-x-3 group-hover:-translate-x-1 transition-transform duration-300">
<span
class="w-2.5 translate-y-[-0.3px] -translate-x-px opacity-0 h-[1.5px] rounded bg-gray-950 dark:bg-white origin-left scale-x-0 transition duration-300 group-hover:opacity-100 group-hover:scale-x-100"></span>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
class="size-4 text-gray-950 dark:text-white -translate-x-2 transition duration-300 group-hover:translate-x-px"
fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</span>
</a>
<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]">
Spearheading Agentic AI
<!-- <br class="hidden sm:block"> of Frontend Development -->
</h1>
<p
class="text-wrap mx-auto mt-8 max-w-2xl text-lg text-gray-700 dark:text-gray-300 hidden sm:block">
OpenLocus is an AI lab advancing the state of the art in AI & its applications.
</p>
<p class="text-wrap mx-auto mt-6 max-w-2xl text-gray-700 dark:text-gray-300 sm:hidden">OpenLocus is an AI lab advancing the state of the art in AI & its applications.</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="#get-in-touch"
class="*:select-none dark:shadow-primary-500/10 *:disabled:opacity-20 disabled:*:text-gray-300 disabled:dark:*:text-gray-700 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 class="size-5 relative" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path class="opacity-20 dark:opacity-50"
d="M7.40705 15L5.10627 16.7375C5.0234 16.8039 4.92499 16.848 4.82033 16.8658C4.71567 16.8836 4.6082 16.8744 4.50806 16.8392C4.40793 16.8039 4.31842 16.7437 4.24798 16.6643C4.17755 16.5849 4.12851 16.4888 4.10549 16.3852L3.13986 12.0391C3.11906 11.9458 3.11993 11.8489 3.14241 11.756C3.16489 11.6631 3.20839 11.5766 3.26955 11.5031L5.63752 8.66484C5.5469 10.4883 5.99221 12.6117 7.40705 15ZM16.7305 11.5031L14.3625 8.66484C14.4571 10.4883 14.0078 12.6117 12.593 15L14.8938 16.7375C14.9766 16.8039 15.075 16.848 15.1797 16.8658C15.2844 16.8836 15.3918 16.8744 15.492 16.8392C15.5921 16.8039 15.6816 16.7437 15.7521 16.6643C15.8225 16.5849 15.8715 16.4888 15.8946 16.3852L16.8602 12.0391C16.881 11.9458 16.8801 11.8489 16.8576 11.756C16.8351 11.6631 16.7917 11.5766 16.7305 11.5031Z"
fill="currentColor"></path>
<path
d="M11.875 17.5C11.875 17.6658 11.8092 17.8247 11.6919 17.9419C11.5747 18.0591 11.4158 18.125 11.25 18.125H8.75C8.58424 18.125 8.42527 18.0591 8.30806 17.9419C8.19085 17.8247 8.125 17.6658 8.125 17.5C8.125 17.3342 8.19085 17.1753 8.30806 17.0581C8.42527 16.9408 8.58424 16.875 8.75 16.875H11.25C11.4158 16.875 11.5747 16.9408 11.6919 17.0581C11.8092 17.1753 11.875 17.3342 11.875 17.5ZM10 8.75C10.1854 8.75 10.3667 8.69501 10.5208 8.592C10.675 8.48899 10.7952 8.34257 10.8661 8.17126C10.9371 7.99996 10.9557 7.81146 10.9195 7.6296C10.8833 7.44774 10.794 7.2807 10.6629 7.14959C10.5318 7.01847 10.3648 6.92919 10.1829 6.89301C10.001 6.85684 9.81254 6.8754 9.64123 6.94636C9.46993 7.01732 9.32351 7.13748 9.2205 7.29165C9.11748 7.44582 9.0625 7.62708 9.0625 7.8125C9.0625 8.06114 9.16127 8.2996 9.33709 8.47541C9.5129 8.65123 9.75136 8.75 10 8.75ZM17.4703 12.1742L16.5047 16.5203C16.4589 16.7267 16.3615 16.9181 16.2216 17.0766C16.0817 17.2351 15.9039 17.3555 15.7048 17.4266C15.5057 17.4977 15.2918 17.5172 15.0832 17.4831C14.8745 17.4491 14.6779 17.3627 14.5117 17.232L12.3836 15.625H7.61797L5.48828 17.232C5.3221 17.3627 5.12549 17.4491 4.91684 17.4831C4.70819 17.5172 4.49431 17.4977 4.29522 17.4266C4.09613 17.3555 3.91832 17.2351 3.77842 17.0766C3.63853 16.9181 3.54112 16.7267 3.49531 16.5203L2.52969 12.1742C2.48873 11.9877 2.4908 11.7943 2.53574 11.6087C2.58068 11.4231 2.66731 11.2502 2.78906 11.1031L5.02031 8.42656C5.0952 7.44292 5.32102 6.47666 5.68984 5.56172C6.69766 3.03515 8.50234 1.45 9.23437 0.885935C9.45348 0.716157 9.72281 0.624023 10 0.624023C10.2772 0.624023 10.5465 0.716157 10.7656 0.885935C11.4953 1.45 13.3023 3.03515 14.3102 5.56172C14.679 6.47666 14.9048 7.44292 14.9797 8.42656L17.2109 11.1031C17.3327 11.2502 17.4193 11.4231 17.4643 11.6087C17.5092 11.7943 17.5113 11.9877 17.4703 12.1742ZM7.76797 14.375H12.232C13.882 11.4422 14.1906 8.63437 13.1492 6.025C12.2305 3.72187 10.507 2.26562 10 1.875C9.49141 2.26562 7.76797 3.72187 6.84922 6.025C5.80937 8.63437 6.11797 11.4422 7.76797 14.375ZM6.59609 14.832C5.75495 13.3034 5.24453 11.801 5.06484 10.325L3.75 11.9031L4.71562 16.25L4.72969 16.2398L6.59609 14.832ZM16.25 11.9031L14.9352 10.325C14.757 11.7979 14.2477 13.3003 13.407 14.832L15.2703 16.2383L15.2844 16.2484L16.25 11.9031Z"
fill="currentColor"></path>
</svg>
<span class="text-nowrap">Build Together</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" stroke-linecap="round"
stroke-linejoin="round" stroke-width="4" d="m19 12l12 12l-12 12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<section id="projects">
<div class="pt-36">
<div class="mx-auto px-6 max-w-6xl text-gray-500">
<div class="mx-auto px-6 max-w-screen-md text-center">
<h2 class="text-3xl text-gray-950 dark:text-white font-semibold">Our Work</h2>
<p class="mt-6 text-gray-700 dark:text-gray-300">
Our work is <a class="text-primary-400 hover:text-primary-200" href="https://www.practicalnlp.ai">endorsed by AI leaders</a> from Microsoft, Amazon & Google, boosted revenue for Fortune 500s & startups, and has been used to <a class="text-primary-400 hover:text-primary-200" href="https://blog.research.google/2022/05/language-models-perform-reasoning-via.html">benchmark reasoning in LLMs</a> by Google AI. We collaborate closely with Ai2, a Seattle-based AI research institute founded by the late Paul Allen, to advance scientific discovery. <br/><br/>Here are some of our current projects.
</p>
</div>
<div class="mt-12 grid sm:grid-cols-2 lg:grid-cols-2 gap-3">
<div
class="relative group overflow-hidden 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 aria-hidden="true"
class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-primary-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-5 dark:group-hover:opacity-10">
</div>
<div class="relative">
<div
class="border border-primary-500/10 flex w-20 h-20 relative *:relative *:size-10 *:m-auto size-12 rounded-[calc(var(--card-border-radius)/2)] dark:bg-gray-900 dark:border-white/15 before:rounded-[calc((var(--card-border-radius)/2)-1px)] before:absolute before:inset-0 before:border-t before:border-white before:from-primary-100 dark:before:border-white/20 before:bg-gradient-to-b dark:before:from-white/10 dark:before:to-transparent before:shadow dark:before:shadow-gray-950">
<img src="/assets/abstract-sku-agents-1-DtARyzol.svg" alt="SVG Image">
</div>
<div class="mt-6 pb-6 rounded-b-[--card-border-radius]">
<!-- Separate the tet present in the next p tag and highlight the text before the colon as its a title -->
<h3 class="text-lg text-gray-950 dark:text-white font-semibold">Data-Driven Discovery</h3>
<p class="text-gray-700 dark:text-gray-300">Platform & fundamental research (<a class="text-primary-400 hover:text-primary-200" href="https://arxiv.org/abs/2402.13610">ICML24</a>, <a class="text-primary-400 hover:text-primary-200" href="https://github.com/allenai/discoverybench/">DiscoveryBench</a>) to discover knowledge in vast yet underutilized datasets. This can help tackle some of the most pressing scientific questions facing humanity.
</p>
</div>
</div>
</div>
<div href="#"
class="relative group overflow-hidden 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 aria-hidden="true"
class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-success-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-5 dark:group-hover:opacity-10">
</div>
<div class="relative">
<div
class="border border-danger-500/10 flex w-20 h-20 relative *:relative *:size-10 *:m-auto size-12 rounded-[calc(var(--card-border-radius)/2)] dark:bg-gray-900 dark:border-white/15 before:rounded-[calc((var(--card-border-radius)/2)-1px)] before:absolute before:inset-0 before:border-t before:border-white before:from-danger-100 dark:before:border-white/20 before:bg-gradient-to-b dark:before:from-white/10 dark:before:to-transparent before:shadow dark:before:shadow-gray-950">
<img src="/assets/abstract-complex-1-CfuOoAhH.svg" alt="SVG Image">
</div>
<div class="mt-6 pb-6 rounded-b-[--card-border-radius]">
<h3 class="text-lg text-gray-950 dark:text-white font-semibold">Reliable LLMs at Scale</h3>
<p class="text-gray-700 dark:text-gray-300">
Deploying LLMs at Petabyte Scale while improving analytics & reporting for global public companies. We use proprietary algos, agentic systems and guardrails to increase LLM reliability.
</p>
</div>
</div>
</div>
<div href="#"
class="relative group overflow-hidden 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 aria-hidden="true"
class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-success-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-5 dark:group-hover:opacity-10">
</div>
<div class="relative">
<div
class="border border-success-500/10 flex w-20 h-20 relative *:relative *:size-10 *:m-auto size-12 rounded-[calc(var(--card-border-radius)/2)] dark:bg-gray-900 dark:border-white/15 before:rounded-[calc((var(--card-border-radius)/2)-1px)] before:absolute before:inset-0 before:border-t before:border-white before:from-success-100 dark:before:border-white/20 before:bg-gradient-to-b dark:before:from-white/10 dark:before:to-transparent before:shadow dark:before:shadow-gray-950">
<!-- <img src="assets/images/abstract-sku-agents-2.svg" alt="SVG Image"> -->
<img src="/assets/abstract-complex-5-OjChzOd8.svg" alt="SVG Image">
</div>
<div class="mt-6 pb-6 rounded-b-[--card-border-radius]">
<h3 class="text-lg text-gray-950 dark:text-white font-semibold">Constrained Code Generation</h3>
<p class="text-gray-700 dark:text-gray-300">
Code generation with logical constraints that work at large monorepo scale. Our systems have delivered improved developer productivity & test coverage for a range of workflows.
</p>
</div>
</div>
</div>
<!-- <div
class="relative group overflow-hidden 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 aria-hidden="true"
class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-danger-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-5 dark:group-hover:opacity-10">
</div>
<div class="relative">
<div
class="border border-danger-500/10 flex w-20 h-20 relative *:relative *:size-10 *:m-auto size-12 rounded-[calc(var(--card-border-radius)/2)] dark:bg-gray-900 dark:border-white/15 before:rounded-[calc((var(--card-border-radius)/2)-1px)] before:absolute before:inset-0 before:border-t before:border-white before:from-danger-100 dark:before:border-white/20 before:bg-gradient-to-b dark:before:from-white/10 dark:before:to-transparent before:shadow dark:before:shadow-gray-950">
<img src="assets/images/abstract-complex-1.svg" alt="SVG Image">
</div>
<div class="mt-6 pb-6 rounded-b-[--card-border-radius]">
<h3 class="text-lg text-gray-950 dark:text-white font-semibold">AI Powered Web Extensions</h3>
<p class="text-gray-700 dark:text-gray-300">Extensions that integrate with your browser to improve focus, filter noise, and find what matters. We draw our inspiration from <a class="text-primary-400 hover:text-primary-200" href="https://twitter.com/karpathy/status/1715806187663585287">Andrej Karpathy's vision</a>.
</p>
</div>
</div>
</div> -->
<div href="#"
class="relative group overflow-hidden 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 aria-hidden="true"
class="inset-0 absolute aspect-video border rounded-full -translate-y-1/2 group-hover:-translate-y-1/4 duration-300 bg-gradient-to-b from-success-500 to-white dark:from-white dark:to-white blur-2xl opacity-25 dark:opacity-5 dark:group-hover:opacity-10">
</div>
<div class="relative">
<div
class="border border-success-500/10 flex w-20 h-20 relative *:relative *:size-10 *:m-auto size-12 rounded-[calc(var(--card-border-radius)/2)] dark:bg-gray-900 dark:border-white/15 before:rounded-[calc((var(--card-border-radius)/2)-1px)] before:absolute before:inset-0 before:border-t before:border-white before:from-success-100 dark:before:border-white/20 before:bg-gradient-to-b dark:before:from-white/10 dark:before:to-transparent before:shadow dark:before:shadow-gray-950">
<img src="/assets/abstract-complex-3--opxI5C4.svg" alt="SVG Image">
</div>
<div class="mt-6 pb-6 rounded-b-[--card-border-radius]">
<h3 class="text-lg text-gray-950 dark:text-white font-semibold">Bespoke AI Systems
</h3>
<p class="text-gray-700 dark:text-gray-300">
Our focus is to solve your business problem and deliver maximum ROI for your AI efforts. We specialize in agentic AI workflows custom build to your domain & requirements.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="get-in-touch">
<!-- Create a similar get in touch section with and email box and india and america address -->
<div class="pt-36">
<div class="max-w-6xl mx-auto space-y-16 px-6 py-16 text-gray-600 2xl:px-0">
<div class="text-center">
<h2 class="text-3xl text-gray-950 dark:text-white font-semibold">Get in Touch</h2>
<p class="mt-6 text-gray-700 dark:text-gray-300">Let us know how we can collaborate.</p>
<div class="text-center">
<div
class="mx-auto rounded-[--card-border-radius] card-shadow bg-white border-[--ui-light-border-color] dark:bg-[--card-dark-bg] dark:border-[--ui-dark-border-color] p-6 max-w-2xl w-full">
<form id="contactForm" class="space-y-4 py-8" method="POST" action="https://formspree.io/f/xeqyrqad">
<div class="grid sm:grid-cols-2 lg:grid-cols-2 gap-x-4 gap-y-4">
<div
class="text-left has-[:disabled]:has-[:where(label,span)]:select-none has-[:disabled]:has-[:where(label,span)]:opacity-50 text-gray-950 dark:text-white has-[:disabled]:has-[:where(label,span)]:text-gray-600 dark:has-[:disabled]:has-[:where(label,span)]:text-gray-400 space-y-2">
<!-- <label class="block font-medium text-base" for="radix-:r26r2u:">Email</label> -->
<input
class="w-full focus:outline rounded-[--field-border-radius] appearance-none transition duration-300 peer border shadow focus:outline-2 focus:-outline-offset-1 focus:border-transparent disabled:shadow-none bg-transparent outline-primary-600 shadow-gray-700/5 border-[--field-light-border-color] hover:border-[--field-light-border-hover-color] placeholder-gray-400 text-gray-700 dark:bg-[--field-dark-bg] dark:focus:bg-[--field-dark-focus-bg] dark:outline-primary-500 dark:shadow-gray-950/40 dark:border-[--field-dark-border-color] dark:hover:border-[--field-dark-border-hover-color] dark:placeholder-gray-600 dark:text-white disabled:bg-gray-100 disabled:border-gray-300 disabled:text-gray-400 disabled:placeholder-gray-300 dark:disabled:bg-gray-600/10 dark:disabled:border-gray-600/20 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-700 text-base h-13 p-5"
type="text" placeholder="Company/Project Name" required="" title="" id="radix-:r26r2u:"
name="project">
</div>
<div
class="text-left has-[:disabled]:has-[:where(label,span)]:select-none has-[:disabled]:has-[:where(label,span)]:opacity-50 text-gray-950 dark:text-white has-[:disabled]:has-[:where(label,span)]:text-gray-600 dark:has-[:disabled]:has-[:where(label,span)]:text-gray-400 space-y-2">
<!-- <label class="block font-medium text-base" for="radix-:r26r2u:">Email</label> -->
<input
class="w-full focus:outline rounded-[--field-border-radius] appearance-none transition duration-300 peer border shadow focus:outline-2 focus:-outline-offset-1 focus:border-transparent disabled:shadow-none bg-transparent outline-primary-600 shadow-gray-700/5 border-[--field-light-border-color] hover:border-[--field-light-border-hover-color] placeholder-gray-400 text-gray-700 dark:bg-[--field-dark-bg] dark:focus:bg-[--field-dark-focus-bg] dark:outline-primary-500 dark:shadow-gray-950/40 dark:border-[--field-dark-border-color] dark:hover:border-[--field-dark-border-hover-color] dark:placeholder-gray-600 dark:text-white disabled:bg-gray-100 disabled:border-gray-300 disabled:text-gray-400 disabled:placeholder-gray-300 dark:disabled:bg-gray-600/10 dark:disabled:border-gray-600/20 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-700 text-base h-13 p-5"
type="email" placeholder="Work Email" required="" title="" id="radix-:r26r2u:" name="email">
</div>
</div>
<div class="space-y-4">
<div
class="text-left has-[:disabled]:has-[:where(label,span)]:select-none has-[:disabled]:has-[:where(label,span)]:opacity-50 text-gray-950 dark:text-white has-[:disabled]:has-[:where(label,span)]:text-gray-600 dark:has-[:disabled]:has-[:where(label,span)]:text-gray-400 space-y-2">
<!-- <label class="block font-medium text-base" for="radix-:r26r2v:">Message</label> -->
<textarea
class="w-full focus:outline rounded-[--field-border-radius] appearance-none transition duration-300 peer border shadow focus:outline-2 focus:-outline-offset-1 focus:border-transparent disabled:shadow-none bg-transparent outline-primary-600 shadow-gray-700/5 border-[--field-light-border-color] hover:border-[--field-light-border-hover-color] placeholder-gray-400 text-gray-700 dark:bg-[--field-dark-bg] dark:focus:bg-[--field-dark-focus-bg] dark:outline-primary-500 dark:shadow-gray-950/40 dark:border-[--field-dark-border-color] dark:hover:border-[--field-dark-border-hover-color] dark:placeholder-gray-600 dark:text-white disabled:bg-gray-100 disabled:border-gray-300 disabled:text-gray-400 disabled:placeholder-gray-300 dark:disabled:bg-gray-600/10 dark:disabled:border-gray-600/20 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-700 text-base py-5 px-5"
placeholder="Tell us what's on your mind..." required="" rows="3" title="" id="radix-:r26r2v:"
name="message"></textarea>
</div>
<button type="submit"
class="group flex items-center relative border rounded-[--btn-border-radius] *:select-none [&>*:not(.sr-only)]:relative text-white before:rounded-[calc(var(--btn-border-radius)-1px)] before:absolute before:inset-0 before:border before:bg-gradient-to-b *:disabled:opacity-20 disabled:text-gray-950/40 disabled:border-gray-200 disabled:bg-gray-100 disabled:*:text-gray-300 disabled:before:border-transparent disabled:before:bg-gray-100 disabled:before:from-transparent dark:border-0 dark:before:border-0 dark:before:border-t dark:before:shadow-inner dark:before:shadow-white/10 dark:disabled:border dark:disabled:border-gray-800/50 disabled:dark:bg-gray-900 disabled:dark:*:text-gray-700 dark:disabled:before:bg-gray-900 dark:disabled:before:from-gray-900 dark:disabled:before:shadow-none dark:*:disabled:!text-white border-primary-600 bg-primary-500 before:border-primary-500 before:from-primary-600 hover:bg-primary-600 active:bg-primary-700 dark:bg-primary-600 dark:before:border-primary-400 dark:hover:bg-primary-700 dark:active:bg-primary-800 dark:active:before:from-primary-700 text-base h-11 px-4 justify-center w-full">
<span>Submit</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</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-[--ui-light-border-color] dark:border-[--ui-dark-border-color]">
<a href="/" aria-label="OpenLocus Logo">
<img src="/logo.png" alt="tailus logo" class="h-8 w-auto" />
</a>
<div class="flex gap-3">
<a href="https://www.linkedin.com/company/openlocus/posts/?feedView=all" target="blank" aria-label="linkedin"
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="100" height="100" fill="currentColor" viewBox="0 0 46 46">
<path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"></path>
</svg>
</a>
<a href="https://github.com/openlocus" target="blank" aria-label="github"
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="20" height="20"
fill="currentColor" viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
</a>
<a href="https://twitter.com/surana_h" 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>
</a>
</div>
</div>
<div class="flex items-center justify-between rounded-md bg-gray-100 px-6 py-3 dark:bg-gray-900">
<span class="text-gray-600 dark:text-gray-400">© OpenLocus Labs 2024</span>
<!-- <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-500">Licence</a> -->
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>
</html>