-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
694 lines (599 loc) · 62.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>significo-clone</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body theme="black">
<!-- main-container -->
<div class="main w-full">
<!-- Header -->
<header class="sticky top-0 left-0 w-full z-[10] flex justify-between items-center px-10">
<!-- logo -->
<nav class="flex items-center gap-3">
<!-- hamburger -->
<svg class="hamburger hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false" style="pointer-events: none;"><path d="M21 6H3V5h18v1zm0 5H3v1h18v-1zm0 6H3v1h18v-1z"></path></svg>
<!-- brand logo -->
<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewBox="0 0 141 41" fill="none">
<g clip-path="url(#clip0_511_410)">
<path d="M-0.43052 20.9465C0.652448 20.9465 1.68707 20.941 2.72169 20.9588C2.79352 20.9588 2.91508 21.1241 2.92475 21.2211C3.02144 22.1886 3.23002 23.1274 3.61541 24.0225C4.50638 26.0928 6.05623 27.4402 8.25256 27.995C10.6602 28.6031 13.043 28.4213 15.3402 27.4989C16.8251 26.9031 17.9261 25.8687 18.3391 24.2903C18.7991 22.533 18.6223 20.8699 17.2382 19.5253C16.4757 18.7846 15.5156 18.3282 14.4907 18.0973C12.6576 17.686 10.8094 17.3416 8.9598 17.0054C7.32016 16.7075 5.68189 16.4124 4.14723 15.7332C2.00201 14.7835 0.666261 13.2243 0.395519 10.8616C0.177268 8.95665 0.428671 7.14329 1.45915 5.48297C2.13186 4.40069 3.07255 3.59718 4.19143 2.99591C5.71228 2.17873 7.35884 1.80704 9.07169 1.67312C10.2514 1.5802 11.4338 1.56107 12.6079 1.71412C14.7932 2.00109 16.7644 2.78273 18.346 4.34603C19.5574 5.54446 20.3669 6.9916 20.7647 8.63962C20.9678 9.47593 21.0755 10.3341 21.2219 11.1841C21.233 11.2483 21.2109 11.3166 21.2012 11.43C20.8517 11.43 20.5092 11.43 20.1666 11.43C19.5339 11.43 18.8999 11.4109 18.2673 11.4382C17.9122 11.4533 17.8183 11.3043 17.7948 10.99C17.6926 9.65221 17.3197 8.40048 16.5585 7.27584C15.5405 5.76994 14.0859 4.93363 12.3109 4.62753C10.5718 4.3269 8.8493 4.42255 7.1765 4.99786C5.46917 5.58546 4.2453 6.67184 3.8903 8.4893C3.48833 10.5459 4.06573 12.2267 6.34079 13.2147C7.65859 13.7873 9.06617 14.021 10.4737 14.2574C12.0899 14.5293 13.7157 14.7657 15.314 15.1196C16.8873 15.4681 18.4012 16.0065 19.6804 17.0437C20.7951 17.9483 21.5452 19.0784 21.7979 20.4859C21.9361 21.2526 22.0604 22.0383 22.0424 22.8118C21.9844 25.3029 21.0672 27.4169 19.0104 28.9461C17.6926 29.9258 16.18 30.4902 14.5736 30.8154C13.206 31.0928 11.8233 31.2117 10.4309 31.1776C7.97077 31.1174 5.65012 30.5872 3.60713 29.1428C2.0103 28.0127 0.95496 26.4932 0.280868 24.6907C-0.103144 23.6617 -0.3062 22.5945 -0.427757 21.5095C-0.445715 21.3428 -0.43052 21.1733 -0.43052 20.9478V20.9465Z" fill="currentColor"></path>
<path d="M30.9936 32.9602H34.0202C34.1583 33.407 34.2688 33.8675 34.4387 34.3062C35.0423 35.8613 36.2344 36.7755 37.8188 37.195C38.4556 37.3644 39.127 37.4874 39.7817 37.4888C41.4642 37.4929 43.061 37.1362 44.307 35.92C45.0018 35.2422 45.4811 34.395 45.6759 33.4398C45.8099 32.7866 45.8955 32.1143 45.9052 31.4502C45.9314 29.5261 45.9107 27.6007 45.9052 25.6766C45.9052 25.4156 45.8762 25.1546 45.8624 24.9114C45.8071 26.1508 45.4908 27.3233 44.7752 28.381C43.9202 29.6464 42.7005 30.3856 41.2515 30.7888C40.2251 31.0744 39.1684 31.1714 38.1089 31.0962C34.8614 30.8653 32.5546 29.2924 31.3196 26.2861C30.5047 24.3005 30.3361 22.2139 30.448 20.0917C30.5116 18.8727 30.7188 17.6839 31.0986 16.5196C32.1015 13.4422 34.5092 11.3952 37.8934 11.1711C39.2568 11.0809 40.5843 11.1752 41.8606 11.6357C44.4976 12.5854 45.6634 14.5874 45.9162 17.2521C45.9162 15.477 45.9231 13.7005 45.9093 11.9254C45.9066 11.6165 45.9867 11.5086 46.3127 11.5154C47.1636 11.5359 48.0159 11.5305 48.8681 11.5182C49.1251 11.5141 49.201 11.5974 49.201 11.8516C49.1955 18.4915 49.2259 25.1314 49.1776 31.7713C49.1624 33.7719 48.5712 35.6426 47.2395 37.2237C46.2035 38.4522 44.8775 39.2393 43.3442 39.6739C41.2722 40.2601 39.1656 40.2656 37.0715 39.816C34.9995 39.3719 33.277 38.362 32.1001 36.5568C31.4592 35.5729 31.1345 34.4825 30.966 33.3387C30.9564 33.2717 30.9605 33.202 30.9646 33.1337C30.9674 33.0886 30.9785 33.0449 30.9936 32.9629V32.9602ZM46.1883 21.1822C46.169 19.9906 46.0405 18.8891 45.6759 17.826C45.3153 16.7792 44.7918 15.8199 43.9202 15.1012C42.5568 13.9765 40.9697 13.6199 39.2223 13.7961C36.9127 14.0298 35.331 15.2064 34.4263 17.3081C33.8986 18.5339 33.7605 19.8279 33.7563 21.1357C33.7522 22.3287 33.9055 23.508 34.3323 24.6394C34.7923 25.8556 35.5092 26.8641 36.6378 27.5611C37.7788 28.2648 39.0247 28.4821 40.3522 28.4165C42.5568 28.3085 44.1992 27.3301 45.2366 25.3924C45.9535 24.0532 46.1455 22.5979 46.1883 21.1835V21.1822Z" fill="currentColor"></path>
<path d="M97.7093 0.874634C97.7093 1.62075 97.7093 2.32314 97.7093 3.0269C97.7093 3.54071 97.4483 3.79761 96.9261 3.79761C94.727 3.79761 92.5293 3.80308 90.3302 3.79214C90.0567 3.79214 89.8841 3.87414 89.7294 4.09278C89.1423 4.91815 88.8094 5.85422 88.6008 6.82034C88.279 8.31805 88.0317 9.83078 87.7554 11.338C87.7485 11.379 87.7665 11.4255 87.7789 11.5171C87.9405 11.5171 88.098 11.5171 88.2555 11.5171C91.2488 11.5171 94.2422 11.5171 97.2342 11.5171C97.7066 11.5171 97.708 11.5184 97.708 11.9817C97.708 18.1091 97.7052 24.2366 97.7149 30.3654C97.7149 30.7029 97.6375 30.8232 97.2756 30.8109C96.4827 30.7836 95.6871 30.7863 94.8928 30.8109C94.5668 30.8205 94.4908 30.7098 94.4908 30.4037C94.4991 24.857 94.4964 19.3103 94.4964 13.7636C94.4964 13.3965 94.3085 13.2129 93.9328 13.2129C91.8953 13.2129 89.8578 13.2197 87.8204 13.2061C87.5026 13.2047 87.3977 13.2976 87.3452 13.6147C87.0413 15.4253 86.7042 17.2305 86.3851 19.0384C86.0812 20.7561 85.7884 22.4765 85.4831 24.1942C85.0674 26.5378 84.6543 28.8814 84.2192 31.2222C84.0686 32.0353 83.8794 32.8429 83.6625 33.6409C83.4084 34.577 82.8282 35.3054 82.0284 35.8506C80.2037 37.0955 78.3693 38.3267 76.5376 39.5648C76.5003 39.5908 76.452 39.6058 76.4216 39.6372C75.8069 40.2918 75.0181 40.177 74.2045 40.1401C74.1962 39.9638 74.1824 39.7971 74.1824 39.6318C74.1797 38.8692 74.1907 38.1054 74.1769 37.3428C74.1728 37.0846 74.2625 37.0135 74.5153 37.0149C75.9892 37.0244 77.4617 37.0094 78.9356 37.0285C79.2367 37.0326 79.4246 36.9411 79.5199 36.6773C79.7754 35.9736 80.1111 35.2849 80.2534 34.5579C80.7576 31.9738 81.1982 29.3788 81.6555 26.7865C82.0588 24.499 82.4483 22.2087 82.8544 19.9198C83.2246 17.8331 83.6073 15.7492 83.9844 13.6625C84.0631 13.2266 84.0521 13.2129 83.6156 13.2129C82.5796 13.2129 81.5436 13.2047 80.5076 13.217C80.2341 13.2211 80.1415 13.1336 80.1595 12.8644C80.1802 12.5351 80.1829 12.203 80.1595 11.8737C80.1387 11.5786 80.2603 11.5102 80.5366 11.513C81.6872 11.5253 82.8393 11.5102 83.9899 11.5225C84.2662 11.5253 84.385 11.4569 84.4499 11.1659C84.7096 10.003 84.9693 8.83596 85.298 7.69081C85.6807 6.35983 86.5164 5.34724 87.6919 4.59292C89.5719 3.38766 91.4381 2.16326 93.3112 0.949793C93.3733 0.908797 93.4576 0.8801 93.5308 0.8801C94.8997 0.876 96.2686 0.877367 97.7066 0.877367L97.7093 0.874634Z" fill="currentColor"></path>
<path d="M140.393 21.0457C140.302 22.8358 140.115 24.4879 139.44 26.0457C138.527 28.1556 137.01 29.6574 134.832 30.4842C133.291 31.0691 131.697 31.2385 130.059 31.1483C128.783 31.0786 127.556 30.8258 126.387 30.3161C124.518 29.5017 123.165 28.1638 122.303 26.3409C121.643 24.9443 121.303 23.463 121.303 21.9271C121.303 20.8311 121.323 19.7229 121.488 18.642C121.884 16.0374 123.101 13.8947 125.409 12.4694C126.72 11.6591 128.189 11.3133 129.719 11.1685C130.92 11.0551 132.103 11.1316 133.279 11.3666C136.529 12.0144 138.673 13.9138 139.733 17.0103C140.068 17.9929 140.253 19.0082 140.299 20.0481C140.315 20.4198 140.369 20.7888 140.394 21.0443L140.393 21.0457ZM137.05 20.6316C137.058 19.9811 136.901 18.8729 136.54 17.7975C136.116 16.5321 135.41 15.4525 134.272 14.7132C133.005 13.8892 131.598 13.6432 130.092 13.7881C127.45 14.0436 125.785 15.5987 125.054 17.945C124.412 20.0071 124.408 22.1143 125.012 24.1955C125.539 26.017 126.617 27.4095 128.455 28.1037C129.78 28.6039 131.153 28.6503 132.523 28.3114C134.11 27.9192 135.296 26.9996 136.066 25.5579C136.812 24.164 137.043 22.665 137.053 20.6316H137.05Z" fill="currentColor"></path>
<path d="M70.1691 30.8002C69.1331 30.8002 68.1219 30.8043 67.1122 30.792C67.0417 30.792 66.945 30.6759 66.9133 30.5939C66.8787 30.5051 66.905 30.3917 66.905 30.2892C66.905 26.452 66.9091 22.6148 66.9036 18.7776C66.9022 17.597 66.6522 16.4805 65.9422 15.498C65.2847 14.5865 64.3578 14.1042 63.2817 13.8787C61.9004 13.5903 60.5688 13.7311 59.2993 14.3761C58.3379 14.8639 57.6873 15.6346 57.2232 16.5721C56.7259 17.5765 56.5104 18.6464 56.5063 19.7643C56.4911 23.3035 56.4621 26.8414 56.4579 30.3807C56.4579 30.7415 56.3474 30.818 56.0104 30.8084C55.2175 30.7866 54.4218 30.8016 53.629 30.8002C53.506 30.8002 53.3831 30.7879 53.2422 30.7811V11.5433C53.3928 11.5337 53.5267 11.5201 53.6607 11.5187C54.4205 11.516 55.1802 11.516 55.9399 11.5187C56.527 11.5201 56.4469 11.49 56.4483 12.0065C56.4552 13.9074 56.4579 15.8096 56.4621 17.7104C56.4621 17.8006 56.4621 17.8894 56.4621 18.0315C56.556 17.3264 56.6016 16.6677 56.7356 16.0268C57.3199 13.2337 59.3035 11.4094 62.3065 11.1675C63.5898 11.0637 64.8288 11.1839 66.0292 11.6171C67.7656 12.2443 68.8983 13.4797 69.5599 15.1618C69.9218 16.0788 70.1221 17.0312 70.129 18.0165C70.1553 22.2144 70.1746 26.4137 70.1953 30.6117C70.1953 30.6554 70.1843 30.6991 70.1705 30.7989L70.1691 30.8002Z" fill="currentColor"></path>
<path d="M119.492 23.9576C119.119 25.9609 118.315 27.68 116.821 29.0205C115.616 30.1014 114.171 30.7232 112.571 30.9965C110.789 31.2999 109.019 31.2548 107.281 30.7574C104.445 29.9443 102.575 28.1254 101.639 25.3569C101.217 24.1093 101.034 22.8275 101.006 21.5129C100.976 20.0056 101.114 18.5257 101.578 17.0854C102.295 14.8607 103.642 13.1348 105.777 12.0962C106.937 11.5318 108.192 11.2613 109.494 11.1629C110.865 11.059 112.203 11.1629 113.518 11.5209C116.279 12.2725 118.094 14.0298 119.034 16.6891C119.165 17.0608 119.263 17.4448 119.389 17.8656C119.242 17.882 119.144 17.9012 119.048 17.9012C118.173 17.9039 117.297 17.8943 116.423 17.9094C116.184 17.9135 116.089 17.8233 116.006 17.6115C115.488 16.2682 114.703 15.134 113.385 14.433C111.286 13.3151 108.246 13.5215 106.451 15.175C105.517 16.0359 104.973 17.1291 104.664 18.3453C104.327 19.6694 104.233 21.0141 104.382 22.3669C104.541 23.8127 104.905 25.1956 105.82 26.3845C106.635 27.4436 107.701 28.1008 109.016 28.3591C110.475 28.6447 111.892 28.5586 113.25 27.8986C114.656 27.214 115.503 26.0661 116.014 24.6463C116.259 23.9658 116.237 23.9576 116.96 23.9576C117.788 23.9576 118.614 23.9576 119.49 23.9576H119.492Z" fill="currentColor"></path>
<path d="M77.4364 21.1702C77.4364 24.2435 77.4309 27.3168 77.4433 30.3901C77.4433 30.7153 77.3618 30.8233 77.0234 30.8123C76.207 30.7891 75.3893 30.7932 74.5729 30.8123C74.2745 30.8192 74.1737 30.7358 74.1779 30.4311C74.1944 29.3051 74.1834 28.1777 74.1834 27.0503C74.1834 22.0311 74.1834 17.0105 74.1834 11.9913C74.1834 11.524 74.1834 11.5226 74.653 11.5226C75.4473 11.5226 76.2416 11.5349 77.0345 11.5158C77.348 11.5076 77.4447 11.5978 77.4433 11.9175C77.4309 15.0017 77.4364 18.0873 77.4364 21.1716V21.1702Z" fill="currentColor"></path>
<path d="M24.8267 21.1653C24.8267 18.092 24.8336 15.0173 24.8184 11.944C24.817 11.5915 24.9192 11.4985 25.2645 11.5081C26.0574 11.5313 26.8531 11.53 27.646 11.5081C27.9651 11.4999 28.0548 11.5997 28.0535 11.9126C28.0438 16.239 28.0466 20.5654 28.0466 24.8904C28.0466 26.7229 28.0383 28.5567 28.0535 30.3892C28.0562 30.7227 27.9526 30.8156 27.6239 30.806C26.8185 30.7842 26.0132 30.7855 25.2079 30.806C24.9013 30.8129 24.8198 30.7199 24.8198 30.4193C24.8308 27.3337 24.8267 24.2495 24.8267 21.1639V21.1653Z" fill="currentColor"></path>
<path d="M24.8574 0.891626H28.0151C28.0262 0.991381 28.0455 1.0884 28.0455 1.18543C28.0483 2.35653 28.04 3.529 28.0524 4.7001C28.0552 4.96931 27.9695 5.0513 27.6988 5.04583C26.8368 5.0308 25.9749 5.03627 25.1129 5.0431C24.914 5.04447 24.8229 4.99254 24.8242 4.77663C24.8325 3.5372 24.8284 2.29777 24.8311 1.05697C24.8311 1.01325 24.845 0.969517 24.8588 0.890259L24.8574 0.891626Z" fill="currentColor"></path>
<path d="M74.1854 0.890259H77.4357C77.4357 1.15536 77.4357 1.4027 77.4357 1.65004C77.4357 2.66263 77.4288 3.67385 77.4412 4.68644C77.444 4.94471 77.3818 5.0472 77.0986 5.04173C76.2256 5.02397 75.3512 5.03353 74.4782 5.03627C74.3166 5.03627 74.1826 5.03217 74.1826 4.81216C74.1868 3.5167 74.1854 2.22124 74.1854 0.891625V0.890259Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_511_410">
<rect width="141" height="40" fill="currentColor" transform="translate(0 0.593384)"></rect>
</clipPath>
</defs>
</svg>
</nav>
<menu class="section flex gap-6 items-center menu">
<a href="#" class="capitalize section">solutions</a>
<a href="#" class="capitalize section">about</a>
<a href="#" class="capitalize section">insights</a>
<a href="#" class="capitalize section">team</a>
<a href="#" class="capitalize section">careers</a>
<a href="#" class="py-1 px-4 rounded-md capitalize section bg-[#F5F19c]">contact</a>
</menu>
<a href="#" class="contact-btn hidden py-1 px-4 rounded-md capitalize section bg-[#F5F19c]">contact</a>
</header>
<!-- Home section -->
<div data-color="black" class="section -mt-[90px] home w-full h-[200vh] top-[10%] relative">
<div class="w-full sticky top-0 left-0">
<!-- video div -->
<div style="--clip: 100%" class=" z-[3] my-video w-full h-screen absolute top-0 left-0 overflow-hidden">
<video autoplay muted loop class="w-full h-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 object-cover " src="https://xgjzloifyvgpbmyonaya.supabase.co/storage/v1/object/public/files/bBj1XfrSyi/1ENIoa5sjq"></video>
</div>
<!-- marquees-->
<div class="marquess-container z[1] w-full h-screen relative overflow-hidden">
<!-- small text -->
<div class="heading absolute top-[10%] left-1/2 -translate-x-1/2 w-full flex flex-col items-center">
<h1 class="text-2xl font-regular">Crafting a new paradigm of</h1>
<h1 class="text-2xl font-regular ">healthcare, one that is</h1>
</div>
<!-- rows -->
<div class="marquee-rows scale-[1] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] ">
<!-- row1 -->
<div class="row1 left-row w-full flex items-center gap-5 whitespace-nowrap -translate-x-1/2 md:text-6xl lg:text-6xl sm:text-2xl ">
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483184_Ellipse%20845.png" alt="img1">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" alt="img2">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483185_Ellipse%20844.png" alt="img3">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483188_Ellipse%20845-2.png" alt="img4">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483183_Ellipse%20845-6.png" alt="img5">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483184_Ellipse%20845.png" alt="img6">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483183_Ellipse%20845-6.png" alt="img7">
</div>
</div>
</div>
<!-- row2 -->
<div class="row2 right-row w-full flex items-center gap-5 whitespace-nowrap -translate-x-1/3 md:text-6xl lg:text-6xl sm:text-2xl">
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483183_Ellipse%20845-6.png" alt="img1">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d348317a_Ellipse%20845-10.png" alt="img2">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483181_Ellipse%20845-5.png" alt="img3">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d348317e_Ellipse%20845-7.png" alt="img4">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483180_Ellipse%20845-4.png" alt="img5">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483182_Ellipse%20845-8.png" alt="img6">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" alt="img7">
</div>
</div>
</div>
<!-- row3 -->
<div class="row3 left-row w-full flex items-center gap-5 whitespace-nowrap -translate-x-1/4 md:text-6xl lg:text-6xl sm:text-2xl">
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483184_Ellipse%20845.png" alt="img1">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483195_Ellipse%20845.png" alt="img2">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d348317a_Ellipse%20845-10.png" alt="img3">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" alt="img4">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483182_Ellipse%20845-8.png" alt="img5">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483183_Ellipse%20845-6.png" alt="img6">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483180_Ellipse%20845-4.png" alt="img7">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" alt="img1">
</div>
</div>
</div>
<!-- row4 -->
<div class="row4 right-row w-full flex items-center gap-5 whitespace-nowrap -translate-x-1/4 md:text-6xl lg:text-6xl sm:text-2xl">
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483180_Ellipse%20845-4.png" alt="img1">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483181_Ellipse%20845-5.png" alt="img2">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483188_Ellipse%20845-2.png" alt="img3">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483183_Ellipse%20845-6.png" alt="img4">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">useful</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d348317a_Ellipse%20845-10.png" alt="img5">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">intuitive</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" alt="img1">
</div>
</div>
<div class="elem flex items-center gap-3">
<h1 class="font-semibold font-['Pp_Neue_Mechina'] ">empathetic</h1>
<div class="imgdiv w-[2.8rem] h-[2.8rem] rounded-full bg-black overflow-hidden">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/659dbdfd5a080be8d3483189_Ellipse%20845-1.png" alt="img1">
</div>
</div>
</div>
</div>
</div>
<!-- bottom left-text -->
<div class="bottom-text z-[4] absolute bottom-[6%] left-[3%] flex flex-col ">
<div>We build big ideas.</div>
<div>Software. Apps. Tools.</div>
<div>For real people. Real lives.</div>
</div>
</div>
<!-- home-sections ends -->
</div>
<!-- text & cards section -->
<div data-color="cyan" class="section text-cards-section w-full flex gap-3 justify-between items-start py-10 relative">
<!-- left section -->
<div class="sticky left-0 top-[9%] left-text w-[50%] flex justify-center flex-col px-10 gap-5">
<p class=" leading-[25.3px] text-lg font-normal">Significo is a leading health software creator founded on the belief that technology can transform healthcare to put people first. Whether they are employees, members, customers, or clients, we never forget the real people we’re designing for.</p>
<div class="font-['Pp_Neue_Mechina'] text-7xl leading-[5.5rem]">
We Craft Human-Centric Health Software
</div>
<div class="solution-button w-fit border-[1.5px] border-black mt-5">
<a class="flex items-center gap-3 text-[18px] uppercase py-4 px-5 font-medium" href="">our solutions<svg class="solution-svg inline pb-1 ease-in-out duration-300" width="27" height="27" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.53848 13.7123L12.9631 6.28769M12.9631 6.28769V13.7123M12.9631 6.28769H5.53848" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</a>
</div>
</div>
<!-- right section -->
<div class="right-cards w-[50%] px-10 translate-y-[55%]">
<!-- card-1 -->
<div class="right-boxes flex gap-3 border-black border-[1.5px] p-6 justify-center items-center gap-8">
<div class="left-card-text flex flex-col gap-3">
<h1 class="font-bold text-xl leading-none">Driven by Purpose</h1>
<p class="font-medium font-normal leading-[21.5px]">We believe technology can dramatically improve the experience of managing health, and when crafted with empathy, intention, and expertise, impact lives at scale.</p>
</div>
<svg width="150" height="150" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M45.9998 10H31.9998L19.7271 26L31.9998 56L59.9998 26L45.9998 10Z" fill="currentColor"></path>
<path d="M18 10H46L60 26L32 56L4 26L18 10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M44.2726 26L31.9998 56L19.7271 26L31.9998 10L44.2726 26Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M4 26H60" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<br>
<!-- card-2 -->
<div class="right-boxes flex gap-3 border-black border-[1.5px] p-6 justify-center items-center gap-8">
<div class="left-card-text flex flex-col gap-3">
<h1 class="font-bold text-xl leading-none">Custom Products</h1>
<p class="font-medium font-normal leading-[21.5px]">We see a need and we develop a solution. Our proprietary technology is available to integrate with your systems, to license, or to customize to meet your needs.</p>
</div>
<svg width="150" height="150" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M49.0005 54C52.8665 54 56.0005 50.866 56.0005 47C56.0005 43.134 52.8665 40 49.0005 40C45.1345 40 42.0005 43.134 42.0005 47C42.0005 50.866 45.1345 54 49.0005 54Z" fill="currentColor"></path>
<path opacity="0.2" d="M15 24C18.866 24 22 20.866 22 17C22 13.134 18.866 10 15 10C11.134 10 8 13.134 8 17C8 20.866 11.134 24 15 24Z" fill="currentColor"></path>
<path d="M49.0005 54C52.8665 54 56.0005 50.866 56.0005 47C56.0005 43.134 52.8665 40 49.0005 40C45.1345 40 42.0005 43.134 42.0005 47C42.0005 50.866 45.1345 54 49.0005 54Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M49.0006 40L49.0002 29.9703C49.0001 26.7878 47.7358 23.7358 45.4855 21.4855L36 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M36 22V12H46" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M15 24C18.866 24 22 20.866 22 17C22 13.134 18.866 10 15 10C11.134 10 8 13.134 8 17C8 20.866 11.134 24 15 24Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M15 24L15.0004 34.0297C15.0005 37.2122 16.2648 40.2642 18.5151 42.5145L28.0006 52" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M28.0003 42V52H18.0003" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<br>
<!-- card-3 -->
<div class="right-boxes flex gap-3 border-black border-[1.5px] p-6 justify-center items-center gap-8">
<div class="left-card-text flex flex-col gap-3">
<h1 class="font-bold text-xl leading-none">Partnerships</h1>
<p class="font-medium font-normal leading-[21.5px]">We partner with like-minded benefits providers, insurance, and health companies to create custom solutions and technology.</p>
</div>
<svg width="150" height="150" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M50 38.2155L40.8007 47.4147C40.5565 47.659 40.2532 47.8358 39.9204 47.928C39.5875 48.0201 39.2365 48.0246 38.9014 47.9408L24.4122 44.3185C24.1404 44.2506 23.886 44.1263 23.6653 43.9537L10 33.268L18.1436 17.9475L30.9736 14.2071C31.4319 14.0735 31.9229 14.1082 32.3578 14.3051L41 18.2155H35.8284C35.5658 18.2155 35.3057 18.2672 35.0631 18.3677C34.8204 18.4682 34.5999 18.6155 34.4142 18.8012L24.6306 28.5848C24.428 28.7875 24.2713 29.0313 24.1711 29.2997C24.0709 29.5682 24.0295 29.855 24.0498 30.1408C24.0702 30.4267 24.1517 30.7048 24.2888 30.9564C24.426 31.208 24.6156 31.4271 24.8448 31.5991L26.2 32.6155C27.5848 33.654 29.269 34.2155 31 34.2155C32.731 34.2155 34.4152 33.654 35.8 32.6155L39 30.2155L50 38.2155Z" fill="currentColor"></path>
<path d="M60.1794 30.4462L54 33.5359L46 18.2154L52.2423 15.0942C52.7113 14.8597 53.2536 14.8188 53.7525 14.9802C54.2514 15.1416 54.6669 15.4925 54.9096 15.9573L61.0578 27.7316C61.1808 27.967 61.2556 28.2246 61.2779 28.4892C61.3002 28.7539 61.2696 29.0204 61.1878 29.2731C61.1061 29.5258 60.9748 29.7596 60.8016 29.9611C60.6285 30.1625 60.417 30.3274 60.1794 30.4462V30.4462Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10.0011 33.2681L3.8217 30.1784C3.58414 30.0596 3.37261 29.8947 3.19947 29.6932C3.02633 29.4918 2.89504 29.258 2.81327 29.0052C2.7315 28.7525 2.70088 28.4861 2.7232 28.2214C2.74552 27.9568 2.82033 27.6992 2.94327 27.4638L9.09151 15.6895C9.33421 15.2247 9.74973 14.8738 10.2486 14.7124C10.7475 14.551 11.2898 14.5919 11.7588 14.8264L18.0011 17.9475L10.0011 33.2681Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M54 33.5359L50 38.2154L40.8007 47.4147C40.5565 47.6589 40.2532 47.8357 39.9204 47.9279C39.5875 48.0201 39.2365 48.0245 38.9014 47.9407L24.4122 44.3184C24.1404 44.2505 23.886 44.1262 23.6653 43.9537L10 33.2679" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M50 38.2155L39 30.2155L35.8 32.6155C34.4152 33.654 32.7309 34.2155 31 34.2155C29.269 34.2155 27.5848 33.654 26.2 32.6155L24.8448 31.5991C24.6156 31.4271 24.4259 31.208 24.2888 30.9564C24.1516 30.7048 24.0701 30.4267 24.0498 30.1408C24.0295 29.855 24.0709 29.5682 24.1711 29.2997C24.2713 29.0313 24.428 28.7875 24.6306 28.5849L34.4142 18.8012C34.5999 18.6155 34.8204 18.4682 35.063 18.3677C35.3057 18.2672 35.5658 18.2155 35.8284 18.2155H46" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M18.1433 17.9475L30.9733 14.2071C31.4316 14.0735 31.9226 14.1082 32.3576 14.3051L40.9997 18.2155" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M28 53.2154L20.4651 51.3317C20.1594 51.2552 19.876 51.1076 19.6381 50.9008L14 46" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<br>
<!-- card-4 -->
<div class="right-boxes flex gap-3 border-black border-[1.5px] p-6 justify-center items-center gap-8">
<div class="left-card-text flex flex-col gap-3">
<h1 class="font-bold text-xl leading-none">Security & Compliance</h1>
<p class="font-medium font-normal leading-[21.5px]">Not just technology experts. Health experts. We are able to navigate both stringent regulatory environments and the complexities of technology and data.</p>
</div>
<svg width="150" height="150" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M10 26.6667V12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10H52C52.5304 10 53.0391 10.2107 53.4142 10.5858C53.7893 10.9609 54 11.4696 54 12V26.6667C54 47.6705 36.1735 54.6292 32.6141 55.8093C32.2161 55.9463 31.7839 55.9463 31.386 55.8093C27.8265 54.6292 10 47.6705 10 26.6667Z" fill="currentColor"></path>
<path d="M10 26.6667V12C10 11.4696 10.2107 10.9609 10.5858 10.5858C10.9609 10.2107 11.4696 10 12 10H52C52.5304 10 53.0391 10.2107 53.4142 10.5858C53.7893 10.9609 54 11.4696 54 12V26.6667C54 47.6705 36.1735 54.6292 32.6141 55.8093C32.2161 55.9463 31.7839 55.9463 31.386 55.8093C27.8265 54.6292 10 47.6705 10 26.6667Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M43 24L28.3333 38L21 31" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<!-- right section end -->
</div>
<!-- text & cards section ends -->
</div>
<!-- third section -->
<div data-color="salmon" class="third-sec-real section w-full">
<!-- main container to hold all slides -->
<div class="main-container h-[200vh] relative">
<!-- slides holder -->
<div class="slides-container sticky top-0 left-0 flex w-full h-[100vh] overflow-hidden">
<!-- first slide -->
<div class="slide w-full h-screen flex-shrink-0 relative">
<div class="slide1-text absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ">
<h1 class="text-8xl leading-[7rem] font-['Pp_Neue_Mechina'] text-black">Real Talk,</h1>
<h1 class="text-8xl leading-[7rem] font-['Pp_Neue_Mechina'] text-black">Real Impact</h1>
</div>
<div class="slide-img rounded-full overflow-hidden h-[280px] w-[280px] absolute right-0 top-1/2 translate-x-1/2 -translate-y-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9ed8426a9be08870acb09_1.jpg" alt="img">
</div>
<div class="fix-padding px-10 bg-red-500 w-fit">
<div class="solution-button w-fit bg-[#f5f15c] border-[1.5px] border-black absolute bottom-[6%] ">
<a class="flex items-center gap-3 text-[18px] uppercase py-4 text-black px-5 font-medium" href="">Partner with us<svg class="solution-svg inline pb-1 ease-in-out duration-300" width="27" height="27" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.53848 13.7123L12.9631 6.28769M12.9631 6.28769V13.7123M12.9631 6.28769H5.53848" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</a>
</div>
</div>
<!-- first slide end -->
</div>
<!-- second slide -->
<div class="slide w-full h-screen flex-shrink-0 relative">
<div class="small-text absolute top-40 left-[20%] w-[20%] ">
<p class="font-medium text-black">We’re on a mission to impact as many lives as possible and build a better company while we do it. Here’s our progress.</p>
</div>
<div class="slide2-text absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center" >
<h1 class="text-[10rem] leading-[7rem] font-['Pp_Neue_Mechina'] mb-5 text-white">20.4 M</h1>
<p class="text-4xl align-center font-['Pp_Neue_Mechina'] text-black">Real people — real lives — we have</p>
<p class="text-4xl align-center font-['Pp_Neue_Mechina'] text-black">built products and solutions for.</p>
</div>
<!-- section images -->
<div class="images ">
<div class="img1 overflow-hidden rounded-full h-[190px] w-[190px] absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 ">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9edd08cc0ac13ed6995bd_4.jpg" alt="img1">
</div>
<div class="img2 overflow-hidden rounded-full h-[250px] w-[250px] absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9ee19cb5203ee12c21ba3_3.jpg" alt="img2">
</div>
<div class="img1 overflow-hidden rounded-full h-[120px] w-[120px] absolute top-1/2 left-1/4 -translate-x-1/9 translate-y-[70%] ">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9edafe67e88c12db2d78b_2.jpg" alt="img3">
</div>
<div class="slide-img rounded-full overflow-hidden h-[280px] w-[280px] absolute right-0 top-1/2 translate-x-1/2 -translate-y-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483164/65e9ee2e5e80fe8ace7a1ff3_5.jpg" alt="img4">
</div>
</div>
<!-- second slide end -->
</div>
<!-- end slides holder -->
</div>
<!-- main container ends -->
</div>
<!-- third section ends -->
</div>
<!-- Our team section -->
<div data-color="white" class="section our-team w-full font-['Pp_Neue_Mechina'] text-6xl py-10 ">
<h1 class="text-center w-full py-5">Our Team</h1>
<!-- members -->
<div class="members px-20 py-10 flex flex-col">
<!-- member 1 -->
<div class="member flex justify-between items-center border-b-[1.5px] border-black p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">01</h1>
<h1 class="name text-5xl">Dr. Rick McCartney</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] z-[5]">CEO</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d3483259_Rick%20McCartney%20.png" alt="img1">
</div>
<div class="hover-layer z-[1] w-full h-[0%] bg-blue-700 absolute left-0 top-0"></div>
</div>
<!-- member 2 -->
<div class="member flex justify-between items-center border-b-[1.5px] border-black p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">02</h1>
<h1 class="name text-5xl">Chris Koha</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] z-[5]">COO</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d34832ae_655d505c9d551c9c11dd3613_Chris20Koha.png" alt="img2">
</div>
<div class="hover-layer w-full h-[0%] bg-blue-700 absolute left-0 bottom-0"></div>
</div>
<!-- member 3 -->
<div class="member flex justify-between items-center border-b-[1.5px] border-black p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">03</h1>
<h1 class="name text-5xl">Caroline Nieto</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] capitalize z-[5]">Chief product officer</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/65cd134a7ece047ea2260d5b_Caroline%20Nieto.png" alt="img3">
</div>
<div class="hover-layer w-full h-[0%] bg-blue-700 absolute left-0 top-0"></div>
</div>
<!-- member 4 -->
<div class="member flex justify-between items-center border-b-[1.5px] border-black p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">04</h1>
<h1 class="name text-5xl">Víctor Albertos</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] z-[5]">CTO</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d34832e6_655d504bfd0e67e20640dbbd_ViCC81ctor20Albertos.png" alt="img4">
</div>
<div class="hover-layer w-full h-[0%] bg-blue-700 absolute left-0 bottom-0"></div>
</div>
<!-- member 5 -->
<div class="member flex justify-between items-center border-b-[1.5px] border-black p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">05</h1>
<h1 class="name text-5xl">Dr. Jana Hapfelmeier</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] capitalize z-[5]">Chief innovation officer</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d348325a_655d4fbc461dbfc3c7e1914e_Dr.20Jana20Hapfelmeier.png" alt="img5">
</div>
<div class="hover-layer w-full h-[0%] bg-blue-700 absolute left-0 top-0"></div>
</div>
<!-- member 6 -->
<div class="member flex justify-between items-center border-b-[1.5px] border-black p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">06</h1>
<h1 class="name text-5xl">Michael Robin</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] capitalize z-[5]">vp of marketing</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d34832da_655d501d4436fe51b356605d_Michael20Robin.png" alt="img6">
</div>
<div class="hover-layer w-full h-[0%] bg-blue-700 absolute left-0 bottom-0"></div>
</div>
<!-- member 7 -->
<div class="member flex justify-between items-center border-b-[1.5px] border-black p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">07</h1>
<h1 class="name text-5xl">Adrián Rubio</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] capitalize z-[5]">vp of engineering</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d348325c_655d50b27e70d440e4404528_AdriaCC81n20Rubio.png" alt="img7">
</div>
<div class=" hover-layer w-full h-[0%] bg-blue-700 absolute left-0 top-0"></div>
</div>
<!-- member 8 -->
<div class="member flex justify-between items-center p-8 relative">
<div class="relative z-[4]">
<div class="flex gap-9 items-center">
<h1 class="rank text-zinc-400 text-3xl">08</h1>
<h1 class="name text-5xl">Cy serrano</h1>
</div>
</div>
<h1 class="position text-2xl font-['Roboto'] capitalize z-[5]">vp of product</h1>
<div class="scale-[0] opacity-0 member-img z-[5] h-[15rem] w-[15rem] absolute rounded-full bg-blue-700 overflow-hidden left-1/2 -translate-x-1/2">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d34832c7_655d4fcd461dbfc3c7e19739_Cy20Serrano.png" alt="img8">
</div>
<div class="hover-layer w-full h-[0%] bg-blue-700 absolute left-0 bottom-0"></div>
</div>
<!-- end members -->
</div>
<!-- meet our team button -->
<div class="fix-padding py-10 w-full flex justify-center">
<div class="solution-button w-fit bg-[#f5f15c] border-[1.5px] border-black">
<a class="flex items-center gap-3 text-[18px] uppercase py-4 text-black px-5 font-medium font-['Roboto']" href="" >Meet entire team<svg class="solution-svg inline pb-1 ease-in-out duration-300" width="27" height="27" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.53848 13.7123L12.9631 6.28769M12.9631 6.28769V13.7123M12.9631 6.28769H5.53848" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</a>
</div>
</div>
<!-- our team ends -->
</div>
<!-- Reviews -->
<div data-color="white" class="section reviews p-10">
<div class="text w-full px-20 flex flex-col gap-1 justify-center items-center">
<div class="top-border-line bg-zinc-300 h-[1.5px] w-[15rem] m-auto"></div>
<p class="w-[100%] review-para text-xl mt-10 font-medium text-center leading-[2rem]">Working with the Significo team has been such a pleasure! We took on a significant project to rebuild our entire platform and the team approached the project with our best interests in mind. They continue to prioritize the end user experience and offer amazing expertise in all of the areas we lack internally. I would personally be lost without this team, their ability to problem solve, their openness to feedback and desire to build the product like it is their own.</p>
<div class="reviewr-img w-[100px] h-[100px] rounded-full overflow-hidden mt-8">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/659dbdfd5a080be8d34832e5_MirandaErnst.jpeg" alt="">
</div>
<h1 class="capitalize text-2xl font-medium text-center">Miranda Ernst</h1>
<p class="text-zinc-400 text-center">Product Manager @ HealthCheck360</p>
</div>
<!-- Reviews end -->
</div>
<!-- capsule sections -->
<div data-color="white" class=" section capsule flex items-start justify-between relative py-10 overflow-hidden">
<div class="left-side w-1/3 ">
<div class="text font-normal p-10">
<h1>Stay up-to-date on the</h1>
<h1>latest healthcare</h1>
<h1>innovations and thought</h1>
<h1>leadership.</h1>
</div>
<div class="bottom-text px-10">
<div class="solution-button w-fit bg-[#f5f15c] border-[1.5px] border-black absolute bottom-[6%] ">
<a class="flex items-center gap-3 text-[18px] uppercase py-4 text-black px-5 font-medium" href="">Partner with us<svg class="solution-svg inline pb-1 ease-in-out duration-300" width="27" height="27" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.53848 13.7123L12.9631 6.28769M12.9631 6.28769V13.7123M12.9631 6.28769H5.53848" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</a>
</div>
</div>
</div>
<!-- capsules -->
<div class="right-side w-[67%] flex gap-[2.8rem] px-10 items-center justify-center">
<div class="capsule-one p-6 -rotate-[14deg] flex gap-5 border-black border-[2px] flex-col rounded-full items-center justify-center ">
<div class="img-1 w-[15rem] h-[15rem] bg-red-500 overflow-hidden rounded-full">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/65e61826ab9558e05e681a7f_Untitled%20design.png" alt="">
</div>
<div class="text-content text-center mt-5 font-normal text-[1.5rem] leading-[1.9rem] font-['Pp_Neue_Mechina']">
<h1>Equity in Tech: An </h1>
<h1>International Women’s </h1>
<h1>Day Conversation with </h1>
<h1>Caroline Nieto, </h1>
<h1>Significo’s CPO </h1>
</div>
<div class="w-fit bg-[#e9bbff] border-[1.5px] mt-8 mb-10 rounded-full overflow-hidden">
<a class="flex items-center gap-3 text-[18px] capitalize py-4 text-black px-5 font-medium" href="">Thought leadership</a>
</div>
</div>
<div class="capsule-two p-6 translate-y-[10%] -rotate-[14deg] flex gap-5 border-black border-[2px] flex-col-reverse flex-col rounded-full items-center justify-center">
<div class="img-1 w-[15rem] h-[15rem] bg-red-500 overflow-hidden rounded-full">
<img class="w-full h-full object-cover" src="https://assets-global.website-files.com/659dbdfd5a080be8d3483190/65affe89f470b736a1da1ba2_How%20to%20Use%20Digital%20Health%20Interventions.jpg" alt="">
</div>
<div class="text-content text-center mb-10 font-normal text-[1.5rem] leading-[1.9rem] font-['Pp_Neue_Mechina']">
<h1>Equity in Tech: An </h1>
<h1>International Women’s </h1>
<h1>Day Conversation with </h1>
<h1>Caroline Nieto, </h1>
<h1>Significo’s CPO </h1>
</div>
<div class="w-fit bg-[#e9bbff] border-[1.5px] mt-8 mb-10 rounded-full overflow-hidden">
<a class="flex items-center gap-3 text-[18px] capitalize py-4 text-black px-5 font-medium" href="">Thought leadership</a>
</div>
</div>
</div>
<!-- capsule section end -->
</div>
<!-- main-container ends -->
</div>
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.min.js"></script>
<script src="app.js"></script>
</body>
</html>