-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
604 lines (583 loc) · 46.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
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
<!DOCTYPE html>
<html lang="en" class="w-full h-full">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X6S8Z3H6VY"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-X6S8Z3H6VY');
</script>
<meta charset="UTF-8">
<title>Common Legal Platform</title>
<link rel="stylesheet" href="public/main.css">
<link rel="stylesheet" href="public/additional.css">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="https://www.liquid-legal-institute.com/wp-content/uploads/2020/06/favicon-150x150.png"
sizes="32x32">
<link rel="icon" href="https://www.liquid-legal-institute.com/wp-content/uploads/2020/06/favicon.png"
sizes="192x192">
<link rel="apple-touch-icon" href="https://www.liquid-legal-institute.com/wp-content/uploads/2020/06/favicon.png">
<meta name="msapplication-TileImage"
content="https://www.liquid-legal-institute.com/wp-content/uploads/2020/06/favicon.png">
</head>
<body class="dark:bg-gray-900 w-full h-full">
<!-- Github banner from https://github.com/tholman/github-corners -->
<a href="https://github.com/Liquid-Legal-Institute/Liquid-Legal-Institute.github.io/edit/main/index.html"
class="github-corner" aria-label="View source on GitHub">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80" height="80" viewBox="0 0 250 250"
style="fill:#007ace; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor" class="octo-body"></path>
</svg>
</a>
<div class="relative z-10 pb-8 sm:pb-16 md:pb-20 w-full lg:pb-24 xl:pb-32">
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center sm:h-10 lg:justify-start">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#" aria-label="Home">
<img class="h-8 w-auto sm:h-10"
src="https://www.liquid-legal-institute.com/wp-content/uploads/2020/05/icon-common-legal-platform.png"
alt="Logo">
</a>
</div>
<div class="hidden md:block md:ml-10 md:pr-4">
<a href="#principles"
class="ml-8 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 transition duration-150 ease-in-out">Principles</a>
<a href="#layers"
class="ml-8 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 transition duration-150 ease-in-out">Layers</a>
<a href="#benefits"
class="ml-8 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 transition duration-150 ease-in-out">Benefits</a>
<a href="#community"
class="ml-8 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 transition duration-150 ease-in-out">Community</a>
<a href="https://github.com/Liquid-Legal-Institute"
class="ml-8 font-medium text-gray-500 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 transition duration-150 ease-in-out"
target="_blank">Github</a>
<a href="https://www.liquid-legal-institute.com"
class="ml-8 font-medium text-red-500 hover:text-blue-500 transition duration-150 ease-in-out"
target="_blank">The
LLI</a>
</div>
</nav>
</div>
</div>
<div class="pt-12 pb-24">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center">
<p class="text-base leading-6 text-red-600 font-semibold tracking-wide uppercase">Develop together!
</p>
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-200 sm:text-4xl">
Explore the CLP Ecosystem
</h3>
<p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto">
The Liquid Legal Institute is THE open platform for leading professionals, offering new perspectives on
the transformation of legal departments, law firms and the legal system. The LLI is an interdisciplinary
and open minded think tank contributing to a successful digital transformation.
</p>
</div>
<div class="mt-10">
<ul class="lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-10">
<li>
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<!-- Heroicon name: globe-alt -->
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">Common Legal
Platform</h4>
<p class="mt-2 text-base leading-6 text-gray-500">
To ensure that the CLP serves the interests of all, we have drafted the following
“Principles for a Common Legal Platform”. Help us to shape and implement these
principles. Let’s design the future!
</p>
</div>
</div>
</li>
<li class="mt-8 lg:mt-0">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/>
</svg>
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">
Collaborative</h4>
<p class="mt-2 text-base leading-6 text-gray-500">
Entirely new expectations emerge not only regarding the in-house legal functions,
but also regarding law-makers, public administration, justice and the legal
ecosystem as a whole.
</p>
</div>
</div>
</li>
<li class="mt-8 lg:mt-0">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"/>
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">Open</h4>
<p class="mt-2 text-base leading-6 text-gray-500">
To enable a truly open collaboration towards realizing the CLP, we have made the
“Principles for a Common Legal Platform” available on GitHub.
</p>
</div>
</div>
</li>
<li class="mt-8 lg:mt-0">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">Encouraging</h4>
<p class="mt-2 text-base leading-6 text-gray-500">
We would like to put these Principles up for discussion and invite everyone to comment,
supplement and elaborate on these principles.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="w-full pb-24">
<div class="text-center" id="principles">
<p class="text-base leading-6 text-red-600 font-semibold tracking-wide uppercase">
Join us!
</p>
<h3
class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-200 sm:text-4xl sm:leading-10">
The principles
</h3>
</div>
<div class="flex flex-col lg:flex-row content-start items-begin">
<div class="w-full lg:w-1/2 mt-10">
<div class="grid grid-cols-2 gap-1">
<div class="flex items-end justify-end flex-col">
<div class="shadow rounded lg:w-56 lg:h-56 w-40 h-40 bg-blue-500 flex items-center justify-center text-2xl hover-feedback tracking-tight font-light"
onmouseover="setPrincipleDescription('a')">
Vision
</div>
</div>
<div class="flex items-begin justify-end flex-col">
<div class="shadow rounded lg:w-56 lg:h-56 w-40 h-40 bg-green-500 flex items-center justify-center text-2xl hover-feedback tracking-tight font-light"
onmouseover="setPrincipleDescription('b')">
Implementation
</div>
</div>
<div class="flex items-end justify-start flex-col">
<div class="shadow rounded lg:w-56 lg:h-56 w-40 h-40 bg-red-500 flex items-center justify-center text-2xl hover-feedback tracking-tight font-light"
onmouseover="setPrincipleDescription('c')">
Neutrality
</div>
</div>
<div class="flex items-begin justify-start flex-col">
<div class="shadow border-1 border-black rounded lg:w-56 lg:h-56 w-40 h-40 bg-purple-500 flex items-center justify-center text-2xl hover-feedback tracking-tight font-light"
onmouseover="setPrincipleDescription('d')">
Governance
</div>
</div>
</div>
</div>
<div class="w-full lg:w-1/2 mt-16 px-8 md:mx-0">
<div class="text-xl leading-7 text-gray-500 md:pr-16" id="projectdescription">
</div>
</div>
</div>
</div>
<div class="w-full pb-24 w-full px-16">
<div class="text-center" id="layers">
<p class="text-base leading-6 text-red-600 font-semibold tracking-wide uppercase">
Explore it!
</p>
<h3
class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-200 sm:text-4xl sm:leading-10">
Implementation layers
</h3>
<p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto">
Layering follows the design principles of modularity and structure, allowing for
compatibility and extensibility. Layering can be found in commonly accepted
approaches for modeling enterprise architectures or complex systems.
</p>
</div>
<div class="w-full pt-24">
<div class="w-full md:w-1/2 mb-8 md:mb-0 md:float-left text-xl leading-7 text-gray-500 md:pr-16"
id="layerdescription">
</div>
<div id="viz" class="flex flex-col space-y-2 w-full md:w-1/2">
<div class="w-full h-full rounded bg-red-500 h-40 p-4 hover-feedback"
onmouseover="setLayerDescription('utilization')">
<div class="font-bold text-xl flex flex-row items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="w-6 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
</svg>
<p>Utilization Layer</p>
</div>
<div class="hidden lg:grid grid-rows-1 grid-cols-5 w-full h-full gap-4 p-4">
<div class="col-span-5 border-2 text-sm border-red-800 text-center rounded p-1">
(Innovative) Business Models
</div>
<div class="border-2 text-sm border-red-800 text-center rounded p-1">
Core <br> Processes
</div>
<div class="border-2 text-sm border-red-800 text-center rounded p-1">
Support <br> Processes
</div>
<div class="border-2 text-sm border-red-800 text-center rounded p-1">
Management Processes
</div>
<div class="border-2 text-sm border-red-800 text-center rounded p-1">
Office <br/> Processes
</div>
<div class="border-2 text-sm border-red-800 text-center rounded flex flex-col justify-center p-1">
...
</div>
</div>
</div>
<div class="w-full h-full rounded bg-blue-500 h-40 p-4 hover-feedback"
onmouseover="setLayerDescription('application')">
<div class="font-bold text-xl flex flex-row items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="w-6 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
<p>Application Layer</p>
</div>
<div class="hidden lg:grid grid-rows-2 grid-cols-4 w-full h-full gap-4 p-4">
<div class="border-2 text-sm border-blue-800 text-center roundedflex flex-col justify-center p-1">
Document <br> Management
</div>
<div class="border-2 text-sm border-blue-800 text-center rounded flex flex-col justify-center p-1">
Client and Customer <br> Management
</div>
<div class="border-2 text-sm border-blue-800 text-center rounded flex flex-col justify-center p-1">
Contract Lifecycle <br> Management
</div>
<div class="border-2 text-sm border-blue-800 text-center rounded flex flex-col justify-center p-1">
Workflow <br> Management
</div>
<div class="border-2 text-sm border-blue-800 text-center rounded flex flex-col justify-center p-1">
Matter and Case <br> Management
</div>
<div class="border-2 text-sm border-blue-800 text-center rounded flex flex-col justify-center p-1">
Knowledge <br> Management
</div>
<div class="border-2 text-sm border-blue-800 text-center rounded flex flex-col justify-center p-1">
Legal Project Management
</div>
<div class="border-2 text-sm border-blue-800 text-center rounded flex flex-col justify-center p-1">
...
</div>
</div>
</div>
<div class="w-full h-full rounded bg-green-500 h-40 p-4 hover-feedback"
onmouseover="setLayerDescription('data')">
<div class="font-bold text-xl flex flex-row items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="w-6 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
</svg>
<p>Data Layer</p>
</div>
<div class="hidden lg:grid grid-rows-2 grid-cols-4 w-full h-full gap-4 p-4">
<div class="border-2 text-sm border-green-800 text-center rounded p-1 flex flex-col justify-center">
Legal Documents
</div>
<div class="border-2 text-sm border-green-800 text-center rounded p-1 flex flex-col justify-center">
Internal <br> Knowledge
</div>
<div class="border-2 text-sm border-green-800 text-center rounded p-1">
Clauses, <br> Negotiations
</div>
<div class="border-2 text-sm border-green-800 text-center rounded p-1">
Contracts, <br> Policies
</div>
<div class="border-2 text-sm border-green-800 text-center rounded p-1">
Cases, <br> Matters
</div>
<div class="border-2 text-sm border-green-800 text-center rounded p-1">
Customers, <br> Clients
</div>
<div class="border-2 text-sm border-green-800 text-center rounded p-1">
Projects, <br> Finances
</div>
<div class="border-2 border-green-800 text-center rounded flex flex-col justify-center p-1">
...
</div>
</div>
</div>
<div class="w-full h-full rounded bg-purple-500 h-40 p-4 hover-feedback"
onmouseover="setLayerDescription('technology')">
<div class="font-bold text-xl flex flex-row items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
class="w-6 h-6 mr-2">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
</svg>
<p>Technology Layer</p>
</div>
<div class="hidden lg:grid grid-rows-1 grid-cols-3 w-full h-full gap-4 p-4">
<div class="border-2 text-sm border-purple-800 text-center rounded p-1">Cloud</div>
<div class="border-2 text-sm border-purple-800 text-center rounded p-1">On-Prem</div>
<div class="border-2 text-sm border-purple-800 text-center rounded p-1">Edge Devices</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-12 pb-24">
<div class="max-w-screen-xl lg:mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center" id="benefits">
<p class="text-base leading-6 text-red-600 font-semibold tracking-wide uppercase">Leverage synergies!
</p>
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-200 sm:text-4xl sm:leading-10">
Platform Benefits
</h3>
<p class="mt-4 max-w-2xl text-xl leading-7 text-gray-500 mx-auto">
Implementing the CLP allows companies and governmental authorities to leverage the full synergies of
seamless integration on every layer: technology, data, applications, and ultimately processes and
workflows. Scale effects will lead to a more efficient and effective legal industry – designed by the
public for a greater good.
</p>
</div>
<div class="mt-40 flex flex-col md:flex-row space-between">
<img class="mx-auto w-full md:w-1/2 h-full dark:hidden hidden lg:block"
src="public/synergies-comp-light.svg" alt=""/>
<img class="mx-auto w-full md:w-1/2 mb-6 h-full light:hidden hidden lg:block"
src="public/synergies-comp-dark.svg" alt=""/>
<div class="w-full md:w-1/2 mb-8 md:mb-0 md:float-left text-xl leading-7 text-gray-500 md:pl-16">
<p class="text-2xl tracking-tight font-bold text-black dark:text-white mb-4">The CLP for companies</p>
<p>
Implementing the Common Legal Platform within an enterprise setup or a company allows to leverage
many synergies arising in all areas of interaction, consumption, or offering of legal (of all
facets) services. This is not only restricted to the legal department. </p></br><p>Conceptualizing
and implementing the four layers of the Common Legal Platform is not only beneficial for use cases
and scenarios of in-house legal department but for the whole company.
</p>
<div class="flex flex-row items-center text-red-500 mt-2">
<div class="dark:text-white">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width='20' height='20'
class='mr-2' fill="currentColor"><title>GitHub icon</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</div>
<a href="https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/PlatformBenefits.md"
class="text-red-500">
Explore on Github
</a>
</div>
</div>
<img class="mx-auto w-full md:w-1/2 h-full dark:hidden lg:hidden"
src="public/synergies-comp-light.svg" alt=""/>
<img class="mx-auto w-full md:w-1/2 mb-6 h-full light:hidden lg:hidden"
src="public/synergies-comp-dark.svg" alt=""/>
</div>
<div class="mt-10 flex flex-col md:flex-row space-between">
<div class="w-full md:w-1/2 mb-8 md:mb-0 md:float-left text-xl leading-7 text-gray-500 md:pr-16">
<p class="text-2xl tracking-tight font-bold text-black dark:text-white mb-4">The CLP for governments</p>
<p>
The Common Legal Platform with its four layers is attractive for governments and governmental
authorities as well. As authorities often face the same or similar challenges as companies, when it
comes up to digital transformation, the CLP can be an ideal conceptual or implementational
framework.
</p></br><p>The CLP is not at all restricted to companies from the private sector. In fact, as
discussed
in depth at GitHub, many synergies will be leveraged once the CLP is adapted by many different players.
</p>
<div class="flex flex-row items-center text-red-500 mt-2">
<div class="dark:text-white">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width='20' height='20'
class='mr-2' fill="currentColor"><title>GitHub icon</title>
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</div>
<a href="https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/PlatformBenefits.md"
class="text-red-500">
Explore on Github
</a>
</div>
</div>
<img class="mx-auto w-full md:w-1/2 h-full dark:hidden" src="public/synergies-gov-light.svg" alt=""/>
<img class="mx-auto w-full md:w-1/2 w-1/2 mb-6 h-full light:hidden" src="public/synergies-gov-dark.svg"
alt=""/>
</div>
</div>
</div>
<div class="pt-12 pb-24">
<div class="max-w-screen-xl lg:mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center" id="community">
<p class="text-base leading-6 text-red-600 font-semibold tracking-wide uppercase">Get in touch!
</p>
<h3 class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 dark:text-gray-200 sm:text-4xl sm:leading-10">
Community
</h3>
</div>
<div class="mt-10">
<ul class="lg:flex lg:flex-row lg:flex-wrap">
<li class="lg:w-1/2 lg:p-8">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<svg class="h-6 w-6" fill="white" viewBox="0 0 24 24" stroke="none">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">Github</h4>
<p class="mt-2 text-base leading-6 text-gray-500">
For technical discussions and contributions to the CLP ecosystem, Github is the main
platform for the LLI. Submit pull requests to the repositories of the projects above
or contact their maintainers to get advice on how to start contributing. The <a
class="text-red-500"
href="https://github.com/Liquid-Legal-Institute">LLI Github Organization</a> is
also a good starting point.
</p>
</div>
</div>
</li>
<li class="mt-10 mt-8 lg:mt-0 lg:w-1/2 lg:p-8">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<svg class="h-6 w-6" fill="white" viewBox="0 0 24 24" stroke="none">
<path xmlns="http://www.w3.org/2000/svg"
d="M20.625 8.127q-.55 0-1.025-.205-.475-.205-.832-.563-.358-.357-.563-.832Q18 6.053 18 5.502q0-.54.205-1.02t.563-.837q.357-.358.832-.563.474-.205 1.025-.205.54 0 1.02.205t.837.563q.358.357.563.837.205.48.205 1.02 0 .55-.205 1.025-.205.475-.563.832-.357.358-.837.563-.48.205-1.02.205zm0-3.75q-.469 0-.797.328-.328.328-.328.797 0 .469.328.797.328.328.797.328.469 0 .797-.328.328-.328.328-.797 0-.469-.328-.797-.328-.328-.797-.328zM24 10.002v5.578q0 .774-.293 1.46-.293.685-.803 1.194-.51.51-1.195.803-.686.293-1.459.293-.445 0-.908-.105-.463-.106-.85-.329-.293.95-.855 1.729-.563.78-1.319 1.336-.756.557-1.67.861-.914.305-1.898.305-1.148 0-2.162-.398-1.014-.399-1.805-1.102-.79-.703-1.312-1.664t-.674-2.086h-5.8q-.411 0-.704-.293T0 16.881V6.873q0-.41.293-.703t.703-.293h8.59q-.34-.715-.34-1.5 0-.727.275-1.365.276-.639.75-1.114.475-.474 1.114-.75.638-.275 1.365-.275t1.365.275q.639.276 1.114.75.474.475.75 1.114.275.638.275 1.365t-.275 1.365q-.276.639-.75 1.113-.475.475-1.114.75-.638.276-1.365.276-.188 0-.375-.024-.188-.023-.375-.058v1.078h10.875q.469 0 .797.328.328.328.328.797zM12.75 2.373q-.41 0-.78.158-.368.158-.638.434-.27.275-.428.639-.158.363-.158.773 0 .41.158.78.159.368.428.638.27.27.639.428.369.158.779.158.41 0 .773-.158.364-.159.64-.428.274-.27.433-.639.158-.369.158-.779 0-.41-.158-.773-.159-.364-.434-.64-.275-.275-.639-.433-.363-.158-.773-.158zM6.937 9.814h2.25V7.94H2.814v1.875h2.25v6h1.875zm10.313 7.313v-6.75H12v6.504q0 .41-.293.703t-.703.293H8.309q.152.809.556 1.5.405.691.985 1.19.58.497 1.318.779.738.281 1.582.281.926 0 1.746-.352.82-.351 1.436-.966.615-.616.966-1.43.352-.815.352-1.752zm5.25-1.547v-5.203h-3.75v6.855q.305.305.691.452.387.146.809.146.469 0 .879-.176.41-.175.715-.48.304-.305.48-.715t.176-.879Z"/>
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">
Microsoft Teams</h4>
<p class="mt-2 text-base leading-6 text-gray-500">
Microsoft Teams is the main communication platform of the Liquid Legal Institute.
Members can use channels and private chats to communicate, exchange files or
organize meetings. Once you have access, you can join <a class="text-red-500"
href="https://teams.microsoft.com/l/team/19%3af63da7ac2fab4e639bc5d7eb5e69b5cb%40thread.skype/conversations?groupId=a98e327d-078e-4f27-a44c-c4930a5a1093&tenantId=f7f1ba90-f358-4d58-bbef-e0ed90225009">here</a>.
</p>
</div>
</div>
</li>
<li class="mt-8 lg:mt-0 lg:w-1/2 mx-auto lg:p-8">
<div class="flex">
<div class="flex-shrink-0">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"/>
</svg>
</div>
</div>
<div class="ml-4">
<h4 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-200">E-Mail</h4>
<p class="mt-2 text-base leading-6 text-gray-500">
For directly reaching the board of the Liquid Legal Institute, get in touch via the
contact form or E-Mail
<a class="text-red-500" href="https://www.liquid-legal-institute.com/contact/">here</a>.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="dark:bg-black dark:text-gray-500 dark:border-gray-800 border p-4 text-gray-900 bg-gray-200">
<a href="https://www.liquid-legal-institute.com/imprint/">Imprint</a>
</div>
</body>
<script>
githubSVG = function (link) {
return `<div class='flex flex-row items-center mt-4'><div class="dark:text-white"><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width='20' height='20' class='mr-2' fill="currentColor"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div><a href="${link}" class="text-red-500">Explore on Github</a></div>`
}
texts = {
"a": {
title: "Vision",
description: "The main idea about the Common Legal Platform is to think ahead in standardizing the legal industry. The Common Legal Platform aims at simplifying legal content, facilitating legal transactions and decreasing the complexity of legal tasks and ultimately making them faster, cheaper, and more efficient. <br>The Common Legal Platform provides a place to host valuable assets, such as commonly accepted documents. <br> Collaborating companies and legal departments will be more efficient as they can benefit from the resources created by them, refined by other experts, and accepted by the community." + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform")
},
"b": {
title: "Implementation",
description: "The CLP is intended to serve as a place for co-operation, interaction and exchange – not only among people, but also among IT systems and between people and IT systems. For such co-operation, interaction and exchange in a decentralized network, connecting structural elements and technical standards. <br>Regarding the connecting structural elements and the technical standards, the following principles should apply." + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/Principles.md#b-setting-up-the-structure-and-the-technical-standards-of-the-common-legal-platform")
},
"c": {
title: "Neutrality",
description: "The nature of the CLP requires that the CLP is in the interest of all. To ensure that this is the case, a system of clear defined rules and values is required that describes right actions and is valid for all participants. The fundamental rules and values shall be as follows." + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/Principles.md#c-ensure-that-the-use-of-the-common-legal-platform-is-in-the-interest-of-all")
},
"d": {
title: "Governance",
description: "To ensure that the CLP is in the interest of all, it also requires a governance structure that is aligned to the objective of neutrality, openness, and to form a trusted environment that supports innovations and new ideas." + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/Principles.md#d-establishing-a-governance-structure-for-administrating-the-common-legal-platform")
}
}
function setPrincipleDescription(a) {
document.getElementById("projectdescription").innerHTML = `<p class="text-2xl leading-8 tracking-tight text-gray-800 mb-2 font-bold dark:text-gray-200">${texts[a].title}</p>${texts[a].description}`
}
var layers = {
"utilization": {
title: "Utilization and Business Layer",
description: "<p>The utilization layer offers services to customers (e.g., lawyers, law firms, in-house legal departments, public administration offices or governmental authorities), which are realized in an organization by business processes performed by business actors.</p></br><p>The utilization layer marks the topmost layer and therefore provides the most abstract, but also the most valuable contribution to the users. The users can be manifold: lawyers, in-house counsels, legal operation managers / officers, legal laymen, etc. The user group is not restricted to persons from the legal profession but can also consist of individuals that are somehow involved in the processes and workflows as carried out in the utilization layer. </p></br><p>At this level existing workflows can be improved (efficiency), new processes can be developed (efficacy), and even new business models (disruption) can be installed. The utilization layer is empowered by the layers below, from which business capabilities arise by applications, data, and infrastructure that is seamlessly integrated, e.g. the Common Legal Platform. </p>" + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/ImplementationConcept.md#common-legal-platform--a-concept-for-implementation")
},
"application": {
title: "Application Layer",
description: "<p>The application layer provides applications which are realized by software to the business layer. This layer is essential as it provides functional services to the utilization layer. These functions can cover the whole range of important services, e.g. communication via chats and conference services, workflow management and execution, document or matter management systems, etc.</p></br><p>The application layer is essential within the Common Legal Platform as it is a main entrance point for vendors of LegalTech solutions. The application layer encapsulates the data and the technology (infrastructure) layer and provides appropriate interfaces, either to the user (UI – user interface), or to other applications (API – application programmable interface). These interfaces are central for the integration, and the interoperability between applications and software systems. Especially, if processes and workflows consume functionalities and services offered by different applications, e.g., a workflow that integrates services from document management, text analytics, and eSignature applications. </p>" + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/ImplementationConcept.md#common-legal-platform--a-concept-for-implementation")
},
"data": {
title: "Data Layer",
description: "<p>The data layer harmonizes different data structures efficiently and securely, by ensuring interoperability and compatibility between different schemas and databases that are used by applications.</p></br><p> At the data layer manages and stores the data assets required by the applications. These data assets can contain the full spectrum of relevant information either be publicly available data, e.g., laws, court decisions, articles, etc., or highly confidential information, e.g., internal knowledge, results from negotiations, customer and client data, etc. The harmonization of the data layer as pursued by the Common Legal Platform allows to efficiently access data from different sources to more easily leverage the synergies arising from the intelligent combination of data or even from data analytics.</p></br><p>Data assets are stored in the technology and infrastructure as provided by technology layer and can either be stored at on-premise infrastructure, but also in scalable cloud environments and – if required – at on-edge devices.</p>" + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/ImplementationConcept.md#common-legal-platform--a-concept-for-implementation")
},
"technology": {
title: "Technology Layer",
description: "<p>The technology layer offers infrastructure services (e.g., processing, storage, and communication services) needed to run applications, realized by computer and communication hardware and system software.</p></br><p>The technology layer provides its services not only from on-premise infrastructure components but also from scalable cloud components, which become more and more important due to technological advancements. It is the technological base for data assets hosted on the data layer, applications that provide their functionalities and services and ultimately the utilization and business layer on which high-level value contribution occurs.</p></br><p>The concept of interoperability from the Common Legal Platform includes the usage of different infrastructure services, by encapsulating the implementation details to the layers on top. Ideally, the data layer must not deal with the question about data storage and infrastructure as it can be consumed from the technology layer.</p>" + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/ImplementationConcept.md#common-legal-platform--a-concept-for-implementation")
},
};
function setLayerDescription(a) {
document.getElementById("layerdescription").innerHTML = `<p class="text-2xl leading-8 tracking-tight text-gray-800 mb-2 font-bold dark:text-gray-200">${layers[a].title}</p>${layers[a].description}`
}
window.onload = function () {
document.getElementById("projectdescription").innerHTML = `<p class="text-2xl leading-8 tracking-tight text-gray-800 mb-2 font-bold dark:text-gray-200">Principles of the CLP</p>Hover over a principle to get more information, and a link to more content on GitHub`
document.getElementById("layerdescription").innerHTML = `<p class="text-2xl leading-8 tracking-tight text-gray-800 mb-2 font-bold dark:text-gray-200">Layers of the CLP</p> <p>In accordance with the CLP Principles four different layers will be subject for implementation:</p></br><p>
<ol>
<li>1. Utilization / business layer</li>
<li>2. Application layer</li>
<li>3. Data layer</li>
<li>4. Technology layer</li>
</ol>
</p></br><p>Hover over a layer to get more information, and a link to more content on GitHub.</p>` + githubSVG("https://github.com/Liquid-Legal-Institute/Common-Legal-Platform/blob/main/ImplementationConcept.md")
}
</script>
</html>