-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhelp.html
715 lines (715 loc) · 38 KB
/
help.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
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
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>
Octava
</title>
<link rel="canonical" href="https://octava.sg/help/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Octava">
<meta property="og:description" content="Octava">
<meta name="author" content="Octava">
<meta name="robots" content="index,follow">
<meta name="keywords" content="personalized website, built with konigle">
<meta property="og:title" content="Octava">
<meta property="og:image" content="../cdn.konigle.net/brand/1693962262/octava-logo.png">
<meta property="og:site_name" content="Octava"/>
<meta property="og:url" content="https://octava.sg/">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<link rel="preconnect" href="https://fonts.googleapis.com/">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="//fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://www.octava.sg/static/starter/static/css/theme.066f4b5de44c.css"/>
<!-- store theme style override -->
<style>
:root {
--pc: #dc2626;
--pcc: #ffffff;
--sc: #16a34a;
--scc: #ffffff;
}
.iti {
width: 100%;
display: block;
}
[x-cloak] {
display: none !important;
}
</style>
</head>
<body class="flex min-h-screen flex-col justify-between">
<style>
.bg-header {
background-color: #e8eeee;
}
.border-header {
border-color: #000000;
}
.text-header {
opacity: 0.6;
color: #000000;
border-color: transparent;
}
.text-header:hover {
opacity: 1;
color: #000000;
border-color: #000000;
}
</style>
<header class="relative">
<nav aria-label="Top">
<!-- Primary navigation -->
<div class="bg-header border-header" x-data="{ linksOpen: false }">
<div class="flex flex-row justify-between items-center mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 h-16">
<!-- Mobile menu (lg-) -->
<div class="flex flex-1 items-center lg:hidden text-header">
<div x-data="{ isOpen: false }" @keydown.window.escape="isOpen = false">
<!-- Hamburger icon button to open slideover-->
<div class="lg:hidden">
<button type="button" class="btn-icon" @click="isOpen = true">
<span class="sr-only">open menu</span>
<svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
</svg>
</button>
</div>
<div role="dialog" class="relative z-40 lg:hidden" aria-modal="true" x-cloak x-show="isOpen">
<!-- Background fade -->
<div class="fixed inset-0 bg-black bg-opacity-25" @click="isOpen = false" x-show="isOpen" x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
<!-- Slideover panel -->
<div class="fixed inset-0 right-10 px-4 flex flex-col overflow-y-auto pb-4 bg-header" x-show="isOpen" x-transition:enter="transition ease-in-out duration-300 transform" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full">
<!-- Close icon button -->
<div class="m-4 text-header">
<button type="button" class="btn-icon" @click="isOpen = false">
<span class="sr-only">close menu</span>
<svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<!-- Links -->
<div class="py-4 text-lg font-normal border-b-2 border-header">
<div class="flex flex-col">
<style>
.border-navbar-link {
border-color: transparent;
}
.border-navbar-link:hover {
border-color: #000000;
}
</style>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders normal links -->
<a class="min-w-max transition text-header" href="/">Octava Foundation</a>
<!-- Icon button to trigger dropdown modal -->
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders normal links -->
<a class="min-w-max transition text-header" href="../c/what-we-do/">WHAT WE DO</a>
<!-- Icon button to trigger dropdown modal -->
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders normal links -->
<a class="min-w-max transition text-header" href="../c/our-investments/">PORTFOLIO</a>
<!-- Icon button to trigger dropdown modal -->
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders normal links -->
<a class="min-w-max transition text-header" href="../pages/contact/">CONTACT US</a>
<!-- Icon button to trigger dropdown modal -->
</div>
<!-- Recursive dropdown modal -->
</div>
</div>
</div>
<div class="py-4 text-lg font-normal border-b-2 border-header">
<div class="flex flex-col">
<style>
.border-navbar-link {
border-color: transparent;
}
.border-navbar-link:hover {
border-color: #000000;
}
</style>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation folders -->
<a class="min-w-max transition text-header" href="/">Blog</a>
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation folders -->
<a class="min-w-max transition text-header" href="../c/glossary/">Glossary</a>
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation folders -->
<a class="min-w-max transition text-header" href="../c/library/">Library</a>
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation folders -->
<a class="min-w-max transition text-header" href="../c/our-investments/">Our Investments</a>
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation folders -->
<a class="min-w-max transition text-header" href="../c/what-we-do/">What we do</a>
</div>
<!-- Recursive dropdown modal -->
</div>
</div>
</div>
<div class="py-4 text-lg font-normal border-b-2 border-header">
<div class="flex flex-col">
<style>
.border-navbar-link {
border-color: transparent;
}
.border-navbar-link:hover {
border-color: #000000;
}
</style>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation pages -->
<a class="min-w-max transition text-header" href="/">About Us</a>
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation pages -->
<a class="min-w-max transition text-header" href="../pages/contact/">Contact Us</a>
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation pages -->
<a class="min-w-max transition text-header" href="../pages/our-story/">Our Story</a>
</div>
<!-- Recursive dropdown modal -->
</div>
<div class="flex flex-col" x-data="{ subOpen: false }">
<div class="flex flex-row px-6 py-3 transition border-r-4 border-navbar-link">
<!-- Renders navigation pages -->
<a class="min-w-max transition text-header" href="../pages/privacy/">Privacy Policy</a>
</div>
<!-- Recursive dropdown modal -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Logo -->
<a href="/" class="min-w-fit transition hover:opacity-75">
<span class="sr-only">Octava</span>
<img class="h-8 lg:h-12 w-auto" width="100" height="100" src="../cdn.konigle.net/brand/1693962262/octava-logo.png" alt="Octava"/>
</a>
<!-- Navbar links -->
<div class="hidden lg:flex lg:flex-1 min-w-0 ml-4">
<div class="flex flex-1 flex-row items-center min-w-0 gap-8 px-4">
<!-- Limits the number of visible links depending on the breakpoint -->
<!-- max 5 for lg+, max 7 for xl+ -->
<div class="hidden min-w-0 text-ellipsis lg:flex xl:flex" data-tile="link">
<div class="flex min-w-0" x-data="{ isOpen: false }">
<div class="flex flex-row min-w-0 items-center">
<a class="text-ellipsis overflow-hidden transition text-header" href="/">Octava Foundation</a>
<!-- Icon button to trigger dropdown modal, if there are sublinks -->
</div>
<!-- Dropdown modal containing sublinks, if any -->
</div>
</div>
<div class="hidden min-w-0 text-ellipsis lg:flex xl:flex" data-tile="link">
<div class="flex min-w-0" x-data="{ isOpen: false }">
<div class="flex flex-row min-w-0 items-center">
<a class="text-ellipsis overflow-hidden transition text-header" href="../c/what-we-do/">WHAT WE DO</a>
<!-- Icon button to trigger dropdown modal, if there are sublinks -->
</div>
<!-- Dropdown modal containing sublinks, if any -->
</div>
</div>
<div class="hidden min-w-0 text-ellipsis lg:flex xl:flex" data-tile="link">
<div class="flex min-w-0" x-data="{ isOpen: false }">
<div class="flex flex-row min-w-0 items-center">
<a class="text-ellipsis overflow-hidden transition text-header" href="../c/our-investments/">PORTFOLIO</a>
<!-- Icon button to trigger dropdown modal, if there are sublinks -->
</div>
<!-- Dropdown modal containing sublinks, if any -->
</div>
</div>
<div class="hidden min-w-0 text-ellipsis lg:flex xl:flex" data-tile="link">
<div class="flex min-w-0" x-data="{ isOpen: false }">
<div class="flex flex-row min-w-0 items-center">
<a class="text-ellipsis overflow-hidden transition text-header" href="../pages/contact/">CONTACT US</a>
<!-- Icon button to trigger dropdown modal, if there are sublinks -->
</div>
<!-- Dropdown modal containing sublinks, if any -->
</div>
</div>
<!-- More links icon button, possibly hidden depending on the breakpoint and the number of links -->
<div class="flex justify-center items-center">
<button class="transition text-header lg:hidden xl:hidden" x-bind:class="linksOpen ? 'rotate-90' : 'rotate-0'" @click="linksOpen = !linksOpen">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-6 h-6">
<path fill-rule="evenodd" d="M4.5 12a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/>
</svg>
</button>
<!-- More links dropdown -->
<div class="absolute top-full z-10 mt-2" x-cloak x-show="linksOpen" x-transition.opacity @mouseleave="linksOpen = false">
<!-- Number of links in dropdown depends on the breakpoint -->
<div class="flex xl:hidden">
<div class="flex flex-col rounded-2xl drop-shadow-lg py-4 bg-header">
<div class="flex flex-col">
<style>
.border-navbar-link {
border-color: transparent;
}
.border-navbar-link:hover {
border-color: #000000;
}
</style>
</div>
</div>
</div>
<div class="flex lg:hidden xl:flex">
<div class="flex flex-col rounded-2xl drop-shadow-lg py-4 bg-header">
<div class="flex flex-col">
<style>
.border-navbar-link {
border-color: transparent;
}
.border-navbar-link:hover {
border-color: #000000;
}
</style>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button group -->
<div class="flex flex-row flex-1 lg:flex-none justify-end items-center ml-4 lg:ml-8">
<div class="flex pr-4 border-r border-header">
<a href="../login/" class="btn btn-light-text btn-sm text-header">Login</a>
</div>
<div class="flex flex-row items-center space-x-2 pl-4">
<div class="text-header"><div x-data="searchModal" x-cloak>
<button type="button" class="btn-icon" x-on:click="handleOpen()" aria-label="search">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
</svg>
</button>
<div x-show="isOpen" x-on:keydown.window.escape="handleClose()" class="fixed inset-0 z-10" aria-labelledby="search-modal" role="dialog" aria-modal="true">
<!-- Background backdrop, show/hide based on modal state. -->
<div x-show="isOpen" x-transition.opacity.duration.500ms class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<div x-show="isOpen" x-transition:enter="transition ease-in-out duration-500" x-transition:enter-start="translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="translate-y-0" x-transition:leave-end="translate-y-full" class="fixed inset-0 z-10 w-screen">
<div class="flex flex-col h-full justify-end items-center">
<!-- Modal panel, show/hide based on modal state. -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 grow bg-white w-full max-h-full shadow-xl">
<div class="sm:col-span-1 lg:col-span-2 px-4 sm:p-8">
<div class="h-24 sm:h-32 mb-8 flex flex-col justify-end items-start">
<h1 class="text-4xl sm:text-6xl font-bold text-gray-900">Search</h1>
</div>
<!-- Search bar and button. -->
<form class="flex flex-row justify-between items-center w-full" x-on:submit="query($event, searchValue)">
<label for="" class="sr-only">Search</label>
<div class="relative flex-grow rounded-lg transition focus-within:drop-shadow-md">
<!-- Search icon adornment. -->
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/>
</svg>
</div>
<input id="search" type="text" name="search" class="block transition w-full rounded-t-lg py-1.5 px-10 text-gray-900 bg-gray-100 placeholder:text-gray-400 sm:text-sm sm:leading-6 border-t-0 border-x-0 border-b-2 border-b-gray-200 focus:border-b-primary focus:ring-0" placeholder="Search anything" x-model="searchValue" x-on:input.debounce.500ms="query($event, searchValue)">
<!-- Invisible button to capture Enter key. -->
<button type="submit" hidden aria-hidden="true"></button>
<!-- Clear input button. -->
<button type="button" x-on:click="handleClear()" x-show="searchValue" class="absolute inset-y-0 right-0 flex items-center pr-3 transition hover:opacity-50" aria-label="clear-search">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400" aria-hidden="true">
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/>
</svg>
</button>
</div>
<!-- Search arrow icon button. -->
<button type="submit" class="btn-icon ml-2 text-gray-500" x-bind:disabled="isLoading" aria-label="query-search">
<!-- Loading indicator. -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 animate-pulse" x-show="isLoading" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
</svg>
<!-- Arrow when not loading. -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" x-show="!isLoading" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
</svg>
</button>
</form>
<!-- "Nothing found" indicator. -->
<div class="relative my-2 prose prose-a:text-primary" x-show="resultGroups?.length === 0 && searchValue && hasSearched" x-transition.opacity>
<p class="text-sm">
Can't find what you're looking for?
Ask for <a href="../help/">help</a>.
</p>
</div>
</div>
<div class="sm:col-span-1 lg:col-span-3 overflow-auto grow px-4 sm:p-8 bg-gray-50 rounded-t-2xl sm:rounded-tr-none sm:rounded-bl-2xl" x-show="resultGroups?.length" x-transition.opacity>
<!-- Displaces list to same level as search bar. -->
<div class="h-16 sm:h-32 mb-8 flex flex-col justify-end items-start">
<!-- Results count. -->
<h3 class="text-2xl sm:text-3xl font-semibold text-gray-900" x-text="`${searchCount} result${searchCount > 1 ? 's' : ''}`"></h3>
</div>
<!-- Search results list. -->
<ul role="list">
<template x-for="group in resultGroups">
<li class="mb-4">
<!-- Result group title. -->
<div class="pb-2">
<h3 class="text-base font-semibold leading-6 text-gray-900" x-text="group.title"></h3>
</div>
<!-- Results list. -->
<ul role="list">
<template x-for="result in group.results">
<a x-bind:href="result?.handle">
<li class="relative flex justify-between gap-x-6 px-4 py-5 rounded-lg transition hover:bg-white hover:shadow-md sm:px-6 lg:px-8">
<div class="flex min-w-0 gap-x-4">
<div class="min-w-0 flex-auto">
<p class="text-sm font-semibold leading-6 text-gray-900" x-text="result?.title"></p>
<p class="mt-1 flex text-xs leading-5 text-gray-500" x-text="result?.subtitle"></p>
</div>
</div>
<!-- Right caret. -->
<div class="flex shrink-0 items-center gap-x-4" aria-hidden="true">
<svg class="h-5 w-5 flex-none text-gray-400" viewbox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd"/>
</svg>
</div>
</li>
</a>
</template>
</ul>
</li>
</template>
</ul>
</div>
</div>
</div>
</div>
<!-- Top right button group. -->
<div class="absolute top-4 right-4 z-10" x-on:click="handleClose()" x-show="isOpen" x-transition.duration.300ms.delay.500ms>
<!-- Close button. -->
<button class="flex flex-row items-center group bg-white text-gray-700 rounded-full p-2 transition drop-shadow-md hover:drop-shadow-lg" type="button">
<!-- Expanding text on hover. -->
<span class="text-sm text-left font-normal transition-all w-0 group-hover:w-12 ps-0 group-hover:ps-1 opacity-0 group-hover:opacity-100 -translate-x-12 group-hover:translate-x-0">Close</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<main class="flex-grow flex flex-col">
<div class="bg-white min-h-full">
<h1 class="sr-only">Octava</h1>
<div>
<div class="relative mx-auto z-0">
<a>
<div class="slide relative z-0 transition duration-300 bg-black overflow-hidden">
<img class="w-full z-0 object-center object-contain lg:object-cover max-h-[55vh] sm:max-h-[65vh] md:max-h-[70vh] lg:max-h-[75vh]" src="../cdn.konigle.net/carousel/1693962262/home-page-carousel-slide-1.jpg" width="" height="" alt="Slide"/>
<div class="absolute bottom-4 lg:bottom-8 left-1/2 -translate-x-1/2 w-5/6 flex flex-col items-center text-center gap-y-4 lg:gap-y-8">
</div>
</div>
</a>
<a>
<div class="slide relative z-0 transition duration-300 bg-black overflow-hidden">
<img class="w-full z-0 object-center object-contain lg:object-cover max-h-[55vh] sm:max-h-[65vh] md:max-h-[70vh] lg:max-h-[75vh]" src="../cdn.konigle.net/carousel/1693962262/home-page-carousel-slide-2.jpg" width="" height="" alt="Slide"/>
<div class="absolute bottom-4 lg:bottom-8 left-1/2 -translate-x-1/2 w-5/6 flex flex-col items-center text-center gap-y-4 lg:gap-y-8">
</div>
</div>
</a>
<a>
<div class="slide relative z-0 transition duration-300 bg-black overflow-hidden">
<img class="w-full z-0 object-center object-contain lg:object-cover max-h-[55vh] sm:max-h-[65vh] md:max-h-[70vh] lg:max-h-[75vh]" src="../cdn.konigle.net/carousel/1693962262/home-page-carousel-slide-3.jpg" width="" height="" alt="Slide"/>
<div class="absolute bottom-4 lg:bottom-8 left-1/2 -translate-x-1/2 w-5/6 flex flex-col items-center text-center gap-y-4 lg:gap-y-8">
</div>
</div>
</a>
<a>
<div class="slide relative z-0 transition duration-300 bg-black overflow-hidden">
<img class="w-full z-0 object-center object-contain lg:object-cover max-h-[55vh] sm:max-h-[65vh] md:max-h-[70vh] lg:max-h-[75vh]" src="../cdn.konigle.net/carousel/1693962262/home-page-carousel-slide-4.jpg" width="" height="" alt="Slide"/>
<div class="absolute bottom-4 lg:bottom-8 left-1/2 -translate-x-1/2 w-5/6 flex flex-col items-center text-center gap-y-4 lg:gap-y-8">
</div>
</div>
</a>
<!-- The previous button -->
<button class="absolute left-0 top-1/2 p-4 -translate-y-1/2 rounded-r-2xl transition text-white hover:text-black bg-black/75 hover:bg-white/75 cursor-pointer" aria-label="Previous" onclick="moveSlide(-1)">❮</button>
<!-- The next button -->
<button class="absolute right-0 top-1/2 p-4 -translate-y-1/2 rounded-l-2xl transition text-white hover:text-black bg-black/75 hover:bg-white/75 cursor-pointer" aria-label="Next" onclick="moveSlide(1)">❯</button>
</div>
<script>
let slideIndex = 1;
showSlide(slideIndex);
// change slide with the prev/next button
function moveSlide(moveStep) {
showSlide((slideIndex += moveStep));
}
function showSlide(n) {
let i;
const slides = document.getElementsByClassName("slide");
const dots = document.getElementsByClassName("dot");
if (!slides.length) {
return;
}
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (let i = 0; i < slides.length; i++) {
slides[i].classList.add("opacity-0");
}
setTimeout(() => {
// hide all slides
for (let i = 0; i < slides.length; i++) {
slides[i].classList.add("hidden");
}
// show the active slide
slides[slideIndex - 1].classList.remove("hidden");
setTimeout(() => {
slides[slideIndex - 1].classList.remove("opacity-0");
}, 50);
}, 300);
}
const slides = document.getElementsByClassName("slide");
let slide_duration= parseInt("7000")
if (slides.length>1) {
setInterval(() => {
moveSlide(1);
}, slide_duration);
}
</script>
<!-- Collections -->
<!-- Featured products -->
<!-- Featured blogs -->
<div class="max-w-7xl px-4 sm:px-6 lg:px-8 mx-auto my-16">
<section aria-labelledby="featured-blogs-heading">
<h2 id="featured-blogs-heading" class="text-base mb-5 font-medium tracking-tight text-gray-500">Interesting reads</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
<article class="flex flex-col items-start justify-between">
<a href="/" class="w-full rounded-2xl group transition hover:bg-primary-content hover:drop-shadow-md hover:ring-1 hover:ring-gray-900/10 ">
<div class="transition group-hover:scale-95">
<div class="relative w-full">
<img src="../cdn.konigle.net/blogs/1693962262/202309/socially-responsible-investments-cover-v-1695783641.jpg" alt="Socially Responsible Investments" width="1200" height="800" loading="lazy" class="aspect-[16/9] w-full rounded-xl bg-gray-100 object-cover sm:aspect-[2/1] lg:aspect-[3/2] ring-1 ring-gray-900/10"/>
</div>
<div class="max-w-xl">
<div class=" mt-8 flex items-center gap-x-4 text-xs">
<time datetime="2023-09-27T02:58:12.951655+00:00" class="text-gray-500">Sep 27, 2023</time>
</div>
<div class="group relative">
<h3 class="mt-3 mb-3 text-lg font-semibold leading-6 text-gray-900">
<span class="absolute inset-0"></span>
Socially Responsible Investments
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600"></p>
</div>
</div>
</div>
</a>
</article>
<article class="flex flex-col items-start justify-between">
<a href="../blog/what-is-impact-investing/" class="w-full rounded-2xl group transition hover:opacity-75 ">
<div class="transition ">
<div class="max-w-xl">
<div class=" flex items-center gap-x-4 text-xs">
<time datetime="2023-09-07T14:40:05.902984+00:00" class="text-gray-500">Sep 07, 2023</time>
</div>
<div class="group relative">
<h3 class="mt-3 mb-3 text-lg font-semibold leading-6 text-gray-900">
<span class="absolute inset-0"></span>
What is impact investing ?
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600"></p>
</div>
</div>
</div>
</a>
</article>
<article class="flex flex-col items-start justify-between">
<a href="../blog/generative-ai-use-cases-for-impact-investing/" class="w-full rounded-2xl group transition hover:opacity-75 ">
<div class="transition ">
<div class="max-w-xl">
<div class=" flex items-center gap-x-4 text-xs">
<time datetime="2023-09-06T08:26:01.705520+00:00" class="text-gray-500">Sep 06, 2023</time>
</div>
<div class="group relative">
<h3 class="mt-3 mb-3 text-lg font-semibold leading-6 text-gray-900">
<span class="absolute inset-0"></span>
Generative AI use cases for impact investing
</h3>
<p class="mt-5 line-clamp-3 text-sm leading-6 text-gray-600"></p>
</div>
</div>
</div>
</a>
</article>
</div>
</section>
</div>
</div>
</div>
</main>
<h3 class="z-50 bg-green-500 px-4 py-2 text-md rounded-md text-white drop-shadow-md fixed top-4 right-4 hidden -translate-y-32 transition ease-in-out duration-500 max-w-md" id="message-success"></h3>
<h3 class="bg-red-600 px-4 py-2 text-md rounded-md text-white drop-shadow-md fixed top-4 right-4 hidden -translate-y-32 transition ease-in-out duration-500 max-w-md" id="message-error"></h3>
<div id="profitjs"></div>
<div>
<style>
footer#page-footer a {
color: #ffffff;
}
footer#page-footer {
background-color: #000000;
color: #ffffff;
}
footer p#copyright-notice {
color: #ffffff;
}
</style>
<footer id="page-footer">
<div class="mx-auto max-w-7xl overflow-hidden px-6 py-2 sm:py-4 lg:px-8 mt-5 sm:mt-8">
<div class="mx-auto"><nav aria-label="Footer">
<ul class=" grid grid-flow-row grid-cols-2 grid-rows-3 gap-3 md:grid-cols-3 lg:grid-cols-4">
<li>
<a href="/" data-footer-nav-link="" class="text-sm leading-6 hover:underline">About Us</a>
</li>
<li>
<a href="../pages/contact/" data-footer-nav-link="" class="text-sm leading-6 hover:underline">Contact Us</a>
</li>
<li>
<a href="../pages/our-story/" data-footer-nav-link="" class="text-sm leading-6 hover:underline">Our Story</a>
</li>
<li>
<a href="../pages/privacy/" data-footer-nav-link="" class="text-sm leading-6 hover:underline">Privacy Policy</a>
</li>
<li>
<a href="/" data-footer-nav-link="" class="text-sm leading-6 text-gray-600 hover:text-gray-900 hover:underline">Blog</a>
</li>
<li>
<a href="../c/glossary/" data-footer-nav-link="" class="text-sm leading-6 text-gray-600 hover:text-gray-900 hover:underline">Glossary</a>
</li>
<li>
<a href="../c/library/" data-footer-nav-link="" class="text-sm leading-6 text-gray-600 hover:text-gray-900 hover:underline">Library</a>
</li>
<li>
<a href="../c/our-investments/" data-footer-nav-link="" class="text-sm leading-6 text-gray-600 hover:text-gray-900 hover:underline">Our Investments</a>
</li>
<li>
<a href="../c/what-we-do/" data-footer-nav-link="" class="text-sm leading-6 text-gray-600 hover:text-gray-900 hover:underline">What we do</a>
</li>
<li>
<a href="../help/" data-footer-nav-link="" class="text-sm leading-6 hover:underline">Help</a>
</li>
</ul>
</nav>
</div>
<div>
<div class="mb-12"><div class="flex justify-center space-x-10">
</div>
</div>
<div class="my-4 flex flex-wrap flex-row gap-5 justify-center">
</div>
</div>
<p class="mt-2 text-center text-xs leading-5 text-gray-600" id="copyright-notice">© 2023 Octava. All rights reserved.</p>
<a target="_blank" id="powered-by-konigle" class="mt-2 mx-auto text-center text-xs leading-5 text-blue-700 flex items-center justify-center" href="https://konigle.com/?referrer=octava.sg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/>
</svg>
<p>Built with Konigle</p>
</a>
</div>
</footer>
</div>
<script>
window.konigle = {
profitjs: {
pageType: "home",
resourceId: "",
accessToken: "b9573ff598754e7f85ed71e04859ba19",
server: "https://konigle.com"
}
};
</script>
<script src="../static/starter/static/js/theme.57e2b95a53d4.js" defer></script>
<script src="../static/starter/static/js/alpinejs-3.x.x.1568cf2d747e.js" defer></script>
<script>
function initProfitJS(){
if (window.hasOwnProperty('profitjs')) {
let whatsAppLink;
let links = [];
if(whatsAppLink){
links.push(whatsAppLink);
}
links.push({
text: "Send an enquiry",
url: "/pages/contact",
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
</svg>
`
});
links.push({
text: "Help",
url: "/help",
icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.712 4.33a9.027 9.027 0 011.652 1.306c.51.51.944 1.064 1.306 1.652M16.712 4.33l-3.448 4.138m3.448-4.138a9.014 9.014 0 00-9.424 0M19.67 7.288l-4.138 3.448m4.138-3.448a9.014 9.014 0 010 9.424m-4.138-5.976a3.736 3.736 0 00-.88-1.388 3.737 3.737 0 00-1.388-.88m2.268 2.268a3.765 3.765 0 010 2.528m-2.268-4.796a3.765 3.765 0 00-2.528 0m4.796 4.796c-.181.506-.475.982-.88 1.388a3.736 3.736 0 01-1.388.88m2.268-2.268l4.138 3.448m0 0a9.027 9.027 0 01-1.306 1.652c-.51.51-1.064.944-1.652 1.306m0 0l-3.448-4.138m3.448 4.138a9.014 9.014 0 01-9.424 0m5.976-4.138a3.765 3.765 0 01-2.528 0m0 0a3.736 3.736 0 01-1.388-.88 3.737 3.737 0 01-.88-1.388m2.268 2.268L7.288 19.67m0 0a9.024 9.024 0 01-1.652-1.306 9.027 9.027 0 01-1.306-1.652m0 0l4.138-3.448M4.33 16.712a9.014 9.014 0 010-9.424m4.138 5.976a3.765 3.765 0 010-2.528m0 0c.181-.506.475-.982.88-1.388a3.736 3.736 0 011.388-.88m-2.268 2.268L4.33 7.288m6.406 1.18L7.288 4.33m0 0a9.024 9.024 0 00-1.652 1.306A9.025 9.025 0 004.33 7.288" />
</svg>
`
});
window.profitjs({
widgets:[{
type: "builtin",
code: "support",
placement: "right",
mainTab: {
title: "Hey there 👋🏿 👋 👋🏼 ",
links: links,
},
}]
}).mount('#profitjs');
}
}
</script>
<script src="../static/common/js/profitjs.umd.aeb209550385.cjs.js" defer onload="initProfitJS()"></script>
</body>
</html>