generated from 11ty/eleventy-base-blog
-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
gaia.njk
551 lines (513 loc) · 33.1 KB
/
gaia.njk
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
---
layout: layouts/base.njk
---
<div class=" mx-4 mt-16 lg:mx-auto">
<div class="max-w-screen-xl mx-auto relative flex items-center justify-center">
<div class="relative z-50 flex flex-col ">
<div class="badge badge-secondary mb-4 py-2 px-4 text-base badge-lg mx-auto">Status: Exploratory</div>
<img src="/img/gaia.png" class="object-cover rounded-lg w-full max-w-[680px]" />
<h1 class="relative z-50 font-semibold text-center mt-8 text-[58px] leading-[80px] mb-2 tracking-tight">
Meet Gaia
</h1>
<h2 class="text-2xl max-w-xl mx-auto !leading-[34px] text-center text-base-content/90">Federated envoys {# emissaries #} for the world beyond humanity</h2>
<div class="flex mt-8 items-center place-content-center gap-4">
{# <a href="https://campground.bonfire.cafe" target="blank" class="btn rounded-full normal-case btn-primary px-5">Explore the campground</a> #}
<a href="mailto:[email protected]" class="btn btn-outline rounded-full !border !border-base-content/30 normal-case">Connect with us</a>
</div>
</div>
</div>
<div class="mx-auto mt-16 max-w-screen-lg md:px-6 lg:px-8">
<div class="w-full">
<div class="rounded-lg flex-1 h-full border border-base-content/20 bg-base-100 rounded-box">
<div class="flex items-center flex-col md:flex-row gap-4 md:gap-8">
<div class="p-3">
<div class="isolate">
<img src="/img/gaia1.png" alt="Gaia" class="min-h-[250px] h-[250px] min-w-[250px] w-[250px]">
</div>
</div>
<div class="px-6 lg:px-0 lg:pr-4 lg:pt-4">
<h2 class="text-lg font-bold leading-7 uppercase text-secondary">the new reality</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-base-content sm:text-4xl">A changing climate</p>
<p class="mt-6 text-lg leading-8 text-base-content/70">Raging wildfires and unprecedented floods - are stark reminders that the Earth is not a silent observer. <br /> <b> It's an active agent.</b></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-screen-lg mt-4 md:px-6 lg:px-8">
<div class="w-full">
<div class="rounded-lg flex-1 h-full border border-base-content/20 bg-base-100 rounded-box">
<div class="flex items-center flex-col md:flex-row gap-4 md:gap-8">
<div class="px-8">
<h2 class="text-lg font-bold leading-7 uppercase text-secondary">imagine</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-base-content sm:text-4xl">A world where gaia speaks</p>
<p class="mt-6 text-lg leading-8 text-base-content/70">...and we can listen. <br />Through Bonfire, we dream of a world where you can converse with our planet just like you chat with a friend. </p>
</div>
<div class="p-3">
<div class="isolate">
<img src="/img/gaia2.png" alt="Gaia" class="min-h-[250px] h-[250px] min-w-[250px] w-[250px]">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mx-auto mt-4 max-w-screen-lg md:px-6 lg:px-8">
<div class="w-full">
<div class="rounded-lg flex-1 h-full border border-base-content/20 bg-base-100 rounded-box">
<div class="flex items-center flex-col md:flex-row gap-4 md:gap-8">
<div class="p-3">
<div class="isolate">
<img src="/img/gaia3.png" alt="Gaia" class="min-h-[250px] h-[250px] min-w-[250px] w-[250px]">
</div>
</div>
<div class="px-6 lg:px-0 lg:pr-4 lg:pt-4">
<h2 class="text-lg font-bold leading-7 uppercase text-secondary">by leveraging</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-base-content sm:text-4xl">The power of IoT and Data</p>
<p class="mt-6 text-lg leading-8 text-base-content/70">We can help transforming and broadcasting the huge amount of raw data coming from Gaia into intuitive visuals and messages, making Earth's voice clearer and more actionable.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mx-auto max-w-screen-lg mt-4 md:px-6 lg:px-8">
<div class="w-full">
<div class="rounded-lg flex-1 h-full border border-base-content/20 bg-base-100 rounded-box">
<div class="flex items-center flex-col md:flex-row gap-4 md:gap-8">
<div class="px-8">
<h2 class="text-lg font-bold leading-7 uppercase text-secondary">meet</h2>
<p class="mt-2 text-3xl font-bold tracking-tight text-base-content sm:text-4xl">Your Earthly neighbors</p>
<p class="mt-6 text-lg leading-8 text-base-content/70">Think beyond traditional wellbeing apps that only update you about your body. With Bonfire, immerse yourself in real-time notifications about the wellness of the world outside - the rivers, the mountains, the meadows, and more.</p>
</div>
<div class="p-3">
<div class="isolate">
<img src="/img/gaia4.png" alt="Gaia" class="min-h-[250px] h-[250px] min-w-[250px] w-[250px]">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-screen-xl mt-32 mx-auto">
<div class="flex border-t-2 pt-6 mb-16 lg:items-center flex-col lg:flex-row lg:justify-between">
<div class="flex flex-col gap-4 items-start">
<div class="text-4xl font-semibold tracking-wider">Connect with Gaia</div>
<div class="text-lg max-w-xl lg:max-w-2xl !leading-[34px] text-base-content/90">Delve into a world where technology and nature converge. Experiment with speculative ways to engage with our environment, fostering a deeper connection and collective impact.</div>
</div>
{# <a href="/features" class="mt-6 lg:mt-0 btn btn-outline !border !border-base-content/30 rounded-full normal-case">View all features</a> #}
</div>
<div class="grid grid-cols-1 gap-y-4 lg:gap-8 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-12">
<div class="col-span-6 mt-6 md:col-span-3 w-full shadow-lg flex rounded-lg bg-gradient-to-t from-base-content/5 to-base-content/40 p-[0.075rem]">
<div class="border-b rounded-lg flex-1 h-full border-base-content/20 bg-base-100 p-4">
<div class="flex items-center">
<div class="text-base-content text-lg font-semibold flex flex-row xl:flex-col">Real time Monitoring</div>
</div>
<div class="text-base-content/80 mt-4">Receive live updates on crucial environmental metrics through Gaia bots powered by networks of sensors and IoT devices.</div>
<svg class="mx-auto my-4 h-[80px]" width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_103_21)"> <path d="M71.5579 16.3347C84.3365 -5.4449 115.825 -5.44489 128.603 16.3347L129.067 17.1257C134.963 27.1733 145.709 33.378 157.358 33.4596L158.276 33.466C183.527 33.6428 199.271 60.9123 186.798 82.8687L186.345 83.6661C180.591 93.7953 180.591 106.205 186.345 116.334L186.798 117.131C199.271 139.088 183.527 166.357 158.276 166.534L157.358 166.54C145.709 166.622 134.963 172.827 129.067 182.874L128.603 183.665C115.825 205.445 84.3365 205.445 71.5579 183.665L71.0938 182.874C65.1986 172.827 54.4517 166.622 42.8027 166.54L41.8856 166.534C16.6346 166.357 0.890585 139.088 13.3629 117.131L13.8159 116.334C19.5698 106.205 19.5698 93.7953 13.8159 83.6661L13.3629 82.8687C0.890585 60.9123 16.6346 33.6428 41.8856 33.466L42.8027 33.4596C54.4518 33.378 65.1986 27.1733 71.0938 17.1257L71.5579 16.3347Z" fill="url(#paint0_linear_103_21)"/> </g> <defs> <linearGradient id="paint0_linear_103_21" x1="100.081" y1="0" x2="100.081" y2="200" gradientUnits="userSpaceOnUse"> <stop stop-color="#B8DBFC"/> <stop offset="1" stop-color="#F8FBFE"/> </linearGradient> <clipPath id="clip0_103_21"> <rect width="200" height="200" fill="white"/> </clipPath> </defs> </svg>
{# <img src="/img/c5.png" class="mx-auto my-4 h-[80px]" /> #}
</div>
</div>
<div class="col-span-6 mt-6 md:col-span-3 w-full shadow-lg flex rounded-lg bg-gradient-to-t from-base-content/5 to-base-content/40 p-[0.075rem]">
<div class="border-b rounded-lg flex-1 h-full border-base-content/20 bg-base-100 p-4">
<div class="flex items-center">
<div class="text-base-content text-lg font-semibold flex flex-row xl:flex-col">Citizen Science</div>
</div>
<div class="text-base-content/80 mt-4">Engage in community-driven data collection, contribute to a growing pool of environmental data, and drive impactful local actions.</div>
<svg class="mx-auto my-4 h-[80px]" width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_104_26)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M107.143 0H92.8571V82.7556L34.3401 24.2385L24.2386 34.3401L82.7556 92.8571H0V107.143H82.7555L24.2386 165.66L34.3401 175.761L92.8571 117.244V200H107.143V117.244L165.66 175.761L175.761 165.66L117.244 107.143H200V92.8571H117.244L175.761 34.34L165.66 24.2385L107.143 82.7555V0Z" fill="url(#paint0_linear_104_26)"/> </g> <defs> <linearGradient id="paint0_linear_104_26" x1="20.5" y1="16" x2="100" y2="200" gradientUnits="userSpaceOnUse"> <stop stop-color="#ACAAFF"/> <stop offset="1" stop-color="#C0E8FF"/> </linearGradient> <clipPath id="clip0_104_26"> <rect width="200" height="200" fill="white"/> </clipPath> </defs> </svg>
{# <img src="/img/c5.png" /> #}
</div>
</div>
<div class="col-span-6 mt-6 md:col-span-3 w-full shadow-lg flex rounded-lg bg-gradient-to-t from-base-content/5 to-base-content/40 p-[0.075rem]">
<div class="border-b rounded-lg flex-1 h-full border-base-content/20 bg-base-100 p-4">
<div class="flex items-center">
<div class="text-base-content text-lg font-semibold flex flex-row xl:flex-col">AI-Assisted Analysis</div>
</div>
<div class="text-base-content/80 mt-4">Uncover trends, anomalies, and predictive insights thanks to community experts and algorithms they contribute and control.</div>
<svg class="mx-auto my-4 h-[80px]" width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_104_35)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M107.143 0H92.8571V63.2531L69.1621 4.60582L55.9166 9.95735L80.2255 70.1239L34.3401 24.2385L24.2386 34.3401L68.2177 78.3191L11.2241 53.4181L5.50459 66.5089L65.8105 92.8571H0V107.143H65.8104L5.50461 133.491L11.2241 146.582L68.2176 121.681L24.2386 165.66L34.3401 175.761L80.2255 129.876L55.9166 190.043L69.1621 195.394L92.8571 136.747V200H107.143V136.747L130.838 195.394L144.083 190.043L119.775 129.876L165.66 175.761L175.761 165.66L131.782 121.681L188.776 146.582L194.495 133.491L134.19 107.143H200V92.8571H134.189L194.495 66.5089L188.776 53.4181L131.782 78.3191L175.761 34.34L165.66 24.2385L119.775 70.1238L144.083 9.95735L130.838 4.60582L107.143 63.2531V0Z" fill="url(#paint0_linear_104_35)"/> </g> <defs> <linearGradient id="paint0_linear_104_35" x1="14" y1="26" x2="179" y2="179.5" gradientUnits="userSpaceOnUse"> <stop stop-color="#E9B8FF"/> <stop offset="1" stop-color="#F9ECFF"/> </linearGradient> <clipPath id="clip0_104_35"> <rect width="200" height="200" fill="white"/> </clipPath> </defs> </svg>
{# <img src="/img/c6.png" /> #}
</div>
</div>
<div class="col-span-6 mt-6 md:col-span-3 w-full shadow-lg flex rounded-lg bg-gradient-to-t from-base-content/5 to-base-content/40 p-[0.075rem]">
<div class="border-b rounded-lg flex-1 h-full border-base-content/20 bg-base-100 p-4">
<div class="flex items-center">
<div class="text-base-content text-lg font-semibold flex flex-row xl:flex-col">Open Data, Open Access</div>
</div>
<div class="text-base-content/80 mt-4">Join a decentralized network that promotes and contributes to open data, knowledge sharing, and collective innovation.</div>
<svg class="mx-auto my-4 h-[80px]" width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_104_69)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M120 14.2857C120 6.39593 113.604 0 105.714 0H94.2857C86.3959 0 80 6.39594 80 14.2857V17.2269C80 29.9541 64.6123 36.3279 55.6128 27.3284L53.533 25.2487C47.9541 19.6698 38.9089 19.6698 33.3299 25.2487L25.2487 33.3299C19.6698 38.9088 19.6698 47.954 25.2487 53.533L27.3285 55.6128C36.328 64.6123 29.9542 80 17.227 80H14.2857C6.39593 80 0 86.3959 0 94.2857V105.714C0 113.604 6.39593 120 14.2857 120H17.2269C29.9542 120 36.328 135.388 27.3285 144.387L25.2487 146.467C19.6698 152.046 19.6698 161.091 25.2487 166.67L33.3299 174.751C38.9089 180.33 47.9541 180.33 53.533 174.751L55.6128 172.671C64.6122 163.672 80 170.046 80 182.773V185.714C80 193.604 86.3959 200 94.2857 200H105.714C113.604 200 120 193.604 120 185.714V182.773C120 170.046 135.388 163.672 144.387 172.671L146.467 174.751C152.046 180.33 161.091 180.33 166.67 174.751L174.751 166.67C180.33 161.091 180.33 152.046 174.751 146.467L172.672 144.387C163.672 135.388 170.046 120 182.773 120H185.714C193.604 120 200 113.604 200 105.714V94.2857C200 86.3959 193.604 80 185.714 80H182.773C170.046 80 163.672 64.6123 172.671 55.6128L174.751 53.5329C180.33 47.954 180.33 38.9088 174.751 33.3299L166.67 25.2487C161.091 19.6697 152.046 19.6697 146.467 25.2487L144.387 27.3284C135.388 36.3279 120 29.9541 120 17.2269V14.2857Z" fill="url(#paint0_linear_104_69)"/> </g> <defs> <linearGradient id="paint0_linear_104_69" x1="14" y1="26" x2="179" y2="179.5" gradientUnits="userSpaceOnUse"> <stop stop-color="#E9B8FF"/> <stop offset="1" stop-color="#F9ECFF"/> </linearGradient> <clipPath id="clip0_104_69"> <rect width="200" height="200" fill="white"/> </clipPath> </defs> </svg>
{# <img src="/img/c8.png" /> #}
</div>
</div>
</div>
</div>
<div class="max-w-screen-xl mt-32 mx-auto">
<div class="flex border-t-2 pt-6 mb-16 lg:items-center flex-col lg:flex-row lg:justify-between">
<div class="flex flex-col gap-4 items-start">
<div class="text-4xl font-semibold tracking-wider">Receive insights right into your timeline</div>
<div class="text-lg max-w-2xl lg:max-w-3xl !leading-[34px] text-base-content/90">Whether it's updates on ecosystem health, wildlife encounters, or environmental stories, Gaia brings the more-than-human worlds to your digital doorstep. Stay informed, inspired, and engaged as you scroll through your timeline, making every moment a chance to connect with Earth's wonders.</div>
</div>
</div>
<div class="grid grid-cols-1 lg:gap-8 gap-y-8 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6">
<div class="col-span-3 mt-6 md:col-span-2 w-full shadow-lg flex rounded-lg bg-gradient-to-t from-base-content/5 to-base-content/40 p-[0.075rem]">
<div class="border-b rounded-lg flex-1 h-full border-base-content/20 bg-base-100 ">
<div class="flex items-center p-4">
<div class="text-base-content text-lg font-semibold flex flex-row xl:flex-col">Air Pollution</div>
</div>
<img src="/img/g1.png" class="mx-auto w-full" />
{# <div class="text-base-content/80 mt-4">The air quality in your area is currently rated as "Moderate." It's safe for most people, but individuals with respiratory conditions may want to take it easy today.</div> #}
</div>
</div>
<div class="col-span-3 mt-6 md:col-span-2 w-full shadow-lg flex rounded-lg bg-gradient-to-t from-base-content/5 to-base-content/40 p-[0.075rem]">
<div class="border-b rounded-lg flex-1 h-full border-base-content/20 bg-base-100 ">
<div class="flex items-center p-4">
<div class="text-base-content text-lg font-semibold flex flex-row xl:flex-col">Local Weather</div>
</div>
<img src="/img/g2.png" class="mx-auto w-full" />
{# <div class="text-base-content/80 mt-4">Create and assign custom roles to grant different permissions to users and circles. Roles affect what actions users can take and what information they can view, interact with, or even edit.</div> #}
</div>
</div>
<div class="col-span-3 mt-6 md:col-span-2 w-full shadow-lg flex rounded-lg bg-gradient-to-t from-base-content/5 to-base-content/40 p-[0.075rem]">
<div class="border-b rounded-lg flex-1 h-full border-base-content/20 bg-base-100 ">
<div class="flex items-center p-4">
<div class="text-base-content text-lg font-semibold flex flex-row xl:flex-col">CO2 Tracking</div>
</div>
<img src="/img/g3.png" class="mx-auto w-full" />
{# <div class="text-base-content/80 mt-4">Your data belong to you. On the fediverse, you are not restricted to a specific software or instance; you are free to leave, transfer all your data, and move to a different instance.</div> #}
</div>
</div>
</div>
</div>
<div class="max-w-screen-xl mt-32 mx-auto">
<div class="flex border-t-2 pt-6 mb-16 lg:items-center flex-col lg:flex-row lg:justify-between">
<div class="flex flex-col gap-4 items-start">
<div class="text-4xl font-semibold tracking-wider">FAQs</div>
</div>
</div>
<div
x-data="{ openPanel: 0 }"
class="">
<dl class="space-y-6 divide-y divide-base-content">
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 0 ? null : 0)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
What is Gaia Connect?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 0, 'rotate-0': !(openPanel === 0) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 0"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Gaia Connect is a transformative project to bridge the gap between humanity and the natural world through the power of federated social networking and AI. It's a platform that connects users with real-time insights from critical zones, environmental data, and the voice of Earth itself.
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 1 ? null : 1)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
How does Gaia Connect work?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 1, 'rotate-0': !(openPanel === 1) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 1"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Gaia Connect integrates with networks of connected sensors and data coming from various open data sources into a Bonfire instance. AI optionally processes this data and translates it into human-friendly insights. Users receive data and/or insights on their social media timelines, fostering a direct connection with the environments they decide to follow.
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 2 ? null : 2)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
What kind of insights does Gaia Connect provide?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 2, 'rotate-0': !(openPanel === 2) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 2"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Gaia Connect offers insights on a range of topics, including air quality, weather updates, CO2 tracking, ecosystem health, and any other meaningful data that can be retrieved from connected sensors or public databases. These insights aim to inform, inspire, and foster a sense of responsibility towards the environment.
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 3 ? null : 3)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
How can I interact with Gaia bots?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 3, 'rotate-0': !(openPanel === 3) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 3"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Each Gaia bot is different based on what topic it focuses on and what data it has collected, and they're assisted by AI designed for interactive conversations. Users can ask questions, seek guidance, share their thoughts, and engage in discussions with Gaia, making the experience more engaging and informative.
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 4 ? null : 4)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
How can I integrate GAIA into my environmental devices?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 4, 'rotate-0': !(openPanel === 4) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 4"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Integrating GAIA into your project should be straightforward. You instruct your environmental sensors or data sources to send data to your Bonfire instance through a Gaia SDK or API, allowing it to process and share insights.
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 5 ? null : 5)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
Is GAIA Connect customizable for specific use cases?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 5, 'rotate-0': !(openPanel === 5) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 5"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Yes, GAIA Connect is flexible and customizable. Depending on different case studies we can extend or train GAIA Connect to interact with specific data sources. Do you have a cool use case in mind? Don't hesitate to contact us at [email protected]
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 6 ? null : 6)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
Can I contribute to GAIA's development and AI training?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 6, 'rotate-0': !(openPanel === 6) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 6"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Yes, we welcome contributions from developers, researchers, and AI enthusiasts. Join our open-source community to collaborate on GAIA's development, AI training, and data analysis efforts.
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 7 ? null : 7)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
What is the long-term vision of Gaia Connect?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 7, 'rotate-0': !(openPanel === 7) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 7"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
Gaia Connect is a speculative research and a child's dream. Can we listen to mountains? Can we know how my favourite lake feels today? Can we use social networks to communicate with the more-than-human worlds rather than just to read my uncle's latest rant? Which role AI can play in this? We don't know, but we are excited to find out.
</div>
</dd>
</div>
<div class="pt-6">
<dt class="text-3xl font-medium">
<button
x-description="Expand/collapse question button"
@click="openPanel = (openPanel === 8 ? null : 8)"
class="flex items-start justify-between w-full text-left">
<span class="font-medium">
Can I access GAIA's datasets?
</span>
<span class="flex items-center ml-6 h-7">
<svg
x-description="Heroicon name: outline/chevron-down"
x-state:on="Open"
x-state:off="Closed"
x-bind:class="{ '-rotate-180': openPanel === 8, 'rotate-0': !(openPanel === 8) }"
class="w-6 h-6 transform -rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd
x-show="openPanel === 8"
class="pr-12 mt-4">
<div class="prose prose-xl prose-light max-w-full">
While we may experiment with various models in the early stages, we are committed to using and creating open and ethical AI, meaning:
<ul>
<li> training data available for review (whenever permitted by user privacy)
<li> training data free to re-use (whenever permitted by licensing)
<li> trained models freely available for self-hosting
<li> powered by open source software (both for training and inferencing)
</ul>
We also support data sharing and collaboration with the scientific community: researchers interested in GAIA are encouraged to reach out to [email protected]
</div>
</dd>
</div>
</dl>
</div>
</div>
<div class="flex items-center place-content-center gap-4">
{# <a href="https://campground.bonfire.cafe" target="blank" class="btn rounded-full normal-case btn-primary px-5">Explore the campground</a> #}
<a href="mailto:[email protected]" class="btn my-16 rounded-full normal-case btn-lg btn-primary btn-outline px-4">Connect with us</a>
</div>
</div>