@syscore/ui-library 1.1.9 → 1.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/client/components/ui/Navigation.tsx +958 -0
  2. package/client/components/ui/SearchField.tsx +157 -0
  3. package/client/components/ui/StrategyTable.tsx +303 -0
  4. package/client/components/ui/Tag.tsx +127 -0
  5. package/client/components/ui/alert-dialog.tsx +1 -1
  6. package/client/components/ui/button.tsx +67 -127
  7. package/client/components/ui/calendar.tsx +2 -2
  8. package/client/components/ui/card.tsx +10 -13
  9. package/client/components/ui/carousel.tsx +56 -46
  10. package/client/components/ui/command.tsx +27 -16
  11. package/client/components/ui/dialog.tsx +113 -92
  12. package/client/components/ui/label.tsx +5 -3
  13. package/client/components/ui/menubar.tsx +1 -1
  14. package/client/components/ui/pagination.tsx +3 -3
  15. package/client/components/ui/sidebar.tsx +1 -1
  16. package/client/components/ui/tabs.tsx +350 -5
  17. package/client/components/ui/toggle.tsx +71 -19
  18. package/client/components/ui/tooltip.tsx +69 -18
  19. package/client/global.css +635 -58
  20. package/dist/ui/fonts/FT-Made/FTMade-Regular.otf +0 -0
  21. package/dist/ui/fonts/FT-Made/FTMade-Regular.ttf +0 -0
  22. package/dist/ui/fonts/FT-Made/FTMade-Regular.woff +0 -0
  23. package/dist/ui/fonts/FT-Made/FTMade-Regular.woff2 +0 -0
  24. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-black.otf +0 -0
  25. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-blackitalic.otf +0 -0
  26. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-bold.otf +0 -0
  27. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-bolditalic.otf +0 -0
  28. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-extrabold.otf +0 -0
  29. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-extrabolditalic.otf +0 -0
  30. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-extralight.otf +0 -0
  31. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-extralightitalic.otf +0 -0
  32. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-italic.otf +0 -0
  33. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-light.otf +0 -0
  34. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-lightitalic.otf +0 -0
  35. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-medium.otf +0 -0
  36. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-mediumitalic.otf +0 -0
  37. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-regular.otf +0 -0
  38. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-semibold.otf +0 -0
  39. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-semibolditalic.otf +0 -0
  40. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-thin.otf +0 -0
  41. package/dist/ui/fonts/Mazzard-M/mazzardsoftm-thinitalic.otf +0 -0
  42. package/dist/ui/index.cjs.js +1 -1
  43. package/dist/ui/index.d.ts +1 -1
  44. package/dist/ui/index.es.js +401 -329
  45. package/package.json +3 -2
package/client/components/ui/Navigation.tsx ADDED
@@ -0,0 +1,958 @@
1
+ import * as React from "react";
2
+ import { AnimatePresence, motion } from "motion/react";
3
+ import { cn } from "@/lib/utils";
4
+ import { UtilityClose } from "../icons/UtilityClose";
5
+ import { NavLogo } from "../icons/NavLogo";
6
+ import { NavAccount } from "../icons/NavAccount";
7
+ import { NavBullet } from "../icons/NavBullet";
8
+ import { Button } from "./Button";
9
+
10
+ export interface NavItem {
11
+ label: string;
12
+ active?: boolean;
13
+ }
14
+
15
+ interface NavigationProps {
16
+ navItems: NavItem[];
17
+ isStrategy?: boolean;
18
+ onLinkClick?: (href: string) => void;
19
+ }
20
+
21
+ export const Navigation: React.FC<NavigationProps> = ({
22
+ navItems,
23
+ isStrategy = false,
24
+ onLinkClick,
25
+ }) => {
26
+ const [isOpen, setIsOpen] = React.useState(false);
27
+ const [activeItem, setActiveItem] = React.useState<number | null>(null);
28
+
29
+ const containerRef = React.useRef<HTMLElement>(null);
30
+ const menuRef = React.useRef<HTMLDivElement>(null);
31
+ const menuItemsRef = React.useRef<HTMLDivElement>(null);
32
+ const overlayRef = React.useRef<HTMLDivElement>(null);
33
+
34
+ const handleMouseLeave = () => {
35
+ setIsOpen(false);
36
+ setActiveItem(null);
37
+ };
38
+
39
+ const handleNavItemMouseEnter = (index: number) => {
40
+ setIsOpen(true);
41
+ setActiveItem(index + 1);
42
+ };
43
+
44
+ const handleLink = (href: string) => {
45
+ if (onLinkClick) {
46
+ onLinkClick(href);
47
+ }
48
+ };
49
+
50
+ // Link component wrapper (can be replaced with Next.js Link or React Router Link)
51
+ const Link: React.FC<{
52
+ to: string;
53
+ className?: string;
54
+ "aria-label"?: string;
55
+ children: React.ReactNode;
56
+ }> = ({ to, className, "aria-label": ariaLabel, children }) => (
57
+ <a
58
+ href={to}
59
+ className={className}
60
+ aria-label={ariaLabel}
61
+ onClick={(e) => {
62
+ e.preventDefault();
63
+ handleLink(to);
64
+ }}
65
+ >
66
+ {children}
67
+ </a>
68
+ );
69
+
70
+ return (
71
+ <nav
72
+ ref={containerRef}
73
+ className={cn(
74
+ "absolute top-0 left-0 z-50 h-14 w-full",
75
+ isStrategy &&
76
+ "bg-gray-50 backdrop-blur-xl backdrop-filter border-b border-gray-100",
77
+ )}
78
+ onMouseLeave={handleMouseLeave}
79
+ >
80
+ {!isStrategy && (
81
+ <div
82
+ ref={overlayRef}
83
+ className={cn(
84
+ "absolute top-0 left-0 z-[-1] h-[340px] w-full duration-300 ease-in-out will-change-transform",
85
+ isOpen
86
+ ? "translate-y-0 bg-[rgba(62,64,73,0.90)] backdrop-blur-xl"
87
+ : "-translate-y-[calc(100%-56px)] bg-black/16",
88
+ )}
89
+ />
90
+ )}
91
+
92
+ <div className="container-lg flex h-14 items-center justify-between">
93
+ <div className="flex h-full sm:min-w-[200px] items-center">
94
+ {isStrategy ? (
95
+ <Button className="mr-4" size="icon">
96
+ <UtilityClose className="text-gray-700 group-hover:text-white" />
97
+ </Button>
98
+ ) : null}
99
+
100
+ <Link
101
+ to="/"
102
+ className={cn(
103
+ "flex items-center ease-in-out duration-300 will-change-transform",
104
+ {
105
+ "translate-x-0": isStrategy,
106
+ },
107
+ )}
108
+ aria-label="Home"
109
+ >
110
+ <NavLogo dark={isStrategy} />
111
+ </Link>
112
+ </div>
113
+
114
+ {!isStrategy ? (
115
+ <div
116
+ className={cn(
117
+ "relative hidden h-full flex-1 items-center justify-center space-x-12 md:flex",
118
+ )}
119
+ >
120
+ <ul className="flex h-full gap-x-12">
121
+ {navItems.map((item, index) => (
122
+ <li
123
+ key={index + 1}
124
+ className={cn(
125
+ "relative flex h-full flex-col items-center justify-center",
126
+ )}
127
+ onMouseEnter={() => handleNavItemMouseEnter(index)}
128
+ >
129
+ <span className="body-small cursor-pointer font-semibold text-white">
130
+ {item.label}
131
+ </span>
132
+
133
+ {/* Underline */}
134
+ {activeItem === index + 1 && (
135
+ <motion.div
136
+ id="underline"
137
+ className="absolute -bottom-[10px] z-50 h-[10px] w-[10px] rounded-full"
138
+ layoutId="underline"
139
+ transition={{ duration: 0.2, ease: "easeOut" }}
140
+ >
141
+ <div
142
+ className="half-circle bg-gradient-to-b from-[#3EECD1] to-[#66FCD9]"
143
+ style={{
144
+ width: "10px",
145
+ height: "5px",
146
+ borderBottomLeftRadius: "100px",
147
+ borderBottomRightRadius: "100px",
148
+ borderBottom: "0",
149
+ boxSizing: "border-box",
150
+ }}
151
+ />
152
+ </motion.div>
153
+ )}
154
+ {index === 0 && (
155
+ <div
156
+ className="absolute -bottom-[5px] z-50 h-[10px] w-[10px] rounded-full"
157
+ style={{ transition: "all 0.2s ease-out" }}
158
+ >
159
+ <div
160
+ className="half-circle bg-white"
161
+ style={{
162
+ width: "10px",
163
+ height: "5px",
164
+ borderTopLeftRadius: "100px",
165
+ borderTopRightRadius: "100px",
166
+ borderBottom: "0",
167
+ boxSizing: "border-box",
168
+ }}
169
+ />
170
+ </div>
171
+ )}
172
+ </li>
173
+ ))}
174
+ </ul>
175
+ </div>
176
+ ) : null}
177
+
178
+ <div className="flex h-full sm:min-w-[200px] items-center justify-end gap-4">
179
+ <Link
180
+ to="/"
181
+ aria-label="Account link"
182
+ className={cn(
183
+ "flex h-8 w-8 items-center justify-center rounded-full transition-colors btn-icon",
184
+ !isOpen ? "bg-black/8" : "bg-white/12",
185
+ isStrategy ? "bg-white border border-gray-100" : "",
186
+ )}
187
+ >
188
+ <NavAccount
189
+ className={isStrategy ? "text-bronze-500" : "text-bronze-100"}
190
+ />
191
+ </Link>
192
+ </div>
193
+ </div>
194
+
195
+ {isOpen && <div className="h-px w-full bg-[rgba(255,255,255,0.08)]" />}
196
+
197
+ {/* Tray */}
198
+ <div
199
+ ref={menuRef}
200
+ className={cn(
201
+ "relative max-h-[292px] pointer-events-none",
202
+ isOpen ? "pointer-events-auto" : "",
203
+ )}
204
+ >
205
+ <div className="absolute top-0 left-0 h-full w-full">
206
+ <div ref={menuItemsRef} className="relative grid">
207
+ <AnimatePresence mode="wait">
208
+ <motion.div
209
+ key={activeItem ? activeItem + 1 : "empty"}
210
+ initial={{ y: 10, opacity: 0 }}
211
+ animate={{ y: 0, opacity: 1 }}
212
+ exit={{ y: -10, opacity: 0 }}
213
+ transition={{ duration: 0.2 }}
214
+ >
215
+ {/* WELL Tray */}
216
+ {activeItem === 1 && (
217
+ <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
218
+ <h2
219
+ className="heading-xsmall py-1"
220
+ style={{
221
+ background:
222
+ "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
223
+ WebkitBackgroundClip: "text",
224
+ WebkitTextFillColor: "transparent",
225
+ backgroundClip: "text",
226
+ }}
227
+ >
228
+ WELL sets the standard for people-first places
229
+ </h2>
230
+
231
+ <div className="flex gap-x-20">
232
+ <div className="space-y-5">
233
+ <h3 className="overline-medium font-semibold text-plum-400">
234
+ Everything
235
+ </h3>
236
+ <ul className="space-y-5">
237
+ <li>
238
+ <Link
239
+ to="/"
240
+ className="body-base block font-medium text-gray-100 hover:text-white"
241
+ >
242
+ Explore WELL
243
+ </Link>
244
+ </li>
245
+ <li>
246
+ <Link
247
+ to="/"
248
+ className="body-base block font-medium text-gray-100 hover:text-white"
249
+ >
250
+ Enroll in WELL
251
+ </Link>
252
+ </li>
253
+ <li>
254
+ <Link
255
+ to="/"
256
+ className="body-base block font-medium text-gray-100 hover:text-white"
257
+ >
258
+ What's new
259
+ </Link>
260
+ </li>
261
+ </ul>
262
+ </div>
263
+ <div className="space-y-5">
264
+ <h3 className="overline-medium font-semibold text-plum-400">
265
+ WHY WELL
266
+ </h3>
267
+ <ul className="space-y-5">
268
+ <li>
269
+ <Link
270
+ to="/"
271
+ className="body-base block font-medium text-gray-100 hover:text-white"
272
+ >
273
+ Performance
274
+ </Link>
275
+ </li>
276
+ <li>
277
+ <Link
278
+ to="/"
279
+ className="body-base block font-medium text-gray-100 hover:text-white"
280
+ >
281
+ ROI
282
+ </Link>
283
+ </li>
284
+ <li>
285
+ <Link
286
+ to="/"
287
+ className="body-base block font-medium text-gray-100 hover:text-white"
288
+ >
289
+ Impact
290
+ </Link>
291
+ </li>
292
+ </ul>
293
+ </div>
294
+ <div className="space-y-5">
295
+ <h3 className="overline-medium font-semibold text-plum-400">
296
+ Standard
297
+ </h3>
298
+ <ul className="space-y-5">
299
+ <li>
300
+ <Link
301
+ to="/"
302
+ className="body-base block font-medium text-gray-100 hover:text-white"
303
+ >
304
+ Strategies
305
+ </Link>
306
+ </li>
307
+ <li>
308
+ <Link
309
+ to="/"
310
+ className="body-base block font-medium text-gray-100 hover:text-white"
311
+ >
312
+ Themes
313
+ </Link>
314
+ </li>
315
+ <li>
316
+ <Link
317
+ to="/"
318
+ className="body-base block font-medium text-gray-100 hover:text-white"
319
+ >
320
+ Milestones
321
+ </Link>
322
+ </li>
323
+ </ul>
324
+ </div>
325
+ <div className="space-y-5">
326
+ <h3 className="overline-medium font-semibold text-plum-400">
327
+ Network
328
+ </h3>
329
+ <ul className="space-y-5">
330
+ <li>
331
+ <Link
332
+ to="/"
333
+ className="body-base block font-medium text-gray-100 hover:text-white"
334
+ >
335
+ Organizations
336
+ </Link>
337
+ </li>
338
+ <li>
339
+ <Link
340
+ to="/"
341
+ className="body-base block font-medium text-gray-100 hover:text-white"
342
+ >
343
+ People
344
+ </Link>
345
+ </li>
346
+ </ul>
347
+ </div>
348
+ <div className="space-y-5">
349
+ <h3 className="overline-medium font-semibold text-plum-400">
350
+ Solutions
351
+ </h3>
352
+ <ul className="space-y-5">
353
+ <li>
354
+ <Link
355
+ to="/"
356
+ className="body-base block font-medium text-gray-100 hover:text-white"
357
+ >
358
+ Products
359
+ </Link>
360
+ </li>
361
+ <li>
362
+ <Link
363
+ to="/"
364
+ className="body-base block font-medium text-gray-100 hover:text-white"
365
+ >
366
+ Services
367
+ </Link>
368
+ </li>
369
+ </ul>
370
+ </div>
371
+ <div className="space-y-5">
372
+ <h3 className="overline-medium font-semibold text-plum-400">
373
+ Places
374
+ </h3>
375
+ <ul className="space-y-5">
376
+ <li>
377
+ <Link
378
+ to="/"
379
+ className="body-base block font-medium text-gray-100 hover:text-white"
380
+ >
381
+ Locations
382
+ </Link>
383
+ </li>
384
+ <li>
385
+ <Link
386
+ to="/"
387
+ className="body-base block font-medium text-gray-100 hover:text-white"
388
+ >
389
+ Portfolios
390
+ </Link>
391
+ </li>
392
+ </ul>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ )}
397
+
398
+ {/* Pursuits Tray */}
399
+ {activeItem === 2 && (
400
+ <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
401
+ <h2
402
+ className="heading-xsmall py-1"
403
+ style={{
404
+ background:
405
+ "linear-gradient(99deg, #41D5F6 3.39%, #3EECD1 57.86%, #66FCD9 112.32%)",
406
+ backgroundClip: "text",
407
+ WebkitBackgroundClip: "text",
408
+ WebkitTextFillColor: "transparent",
409
+ }}
410
+ >
411
+ WELL works everywhere, at any scale
412
+ </h2>
413
+ <div className="flex gap-x-20">
414
+ <div className="space-y-5">
415
+ <h3 className="overline-medium font-semibold text-plum-400">
416
+ SUBSCRIBE
417
+ </h3>
418
+ <ul className="space-y-4">
419
+ <li>
420
+ <Link
421
+ to="/"
422
+ className="body-base block font-medium text-gray-100 hover:text-white"
423
+ >
424
+ WELL at scale
425
+ </Link>
426
+ </li>
427
+ <li>
428
+ <div className="flex items-center gap-3 pl-[6px]">
429
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
430
+ <Link to="/">
431
+ <span className="body-small font-medium text-gray-100">
432
+ Pricing
433
+ </span>
434
+ </Link>
435
+ </div>
436
+ </li>
437
+ <li>
438
+ <div className="flex items-center gap-3 pl-[6px]">
439
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
440
+ <Link to="/">
441
+ <span className="body-small font-medium text-gray-100">
442
+ Leaderboard
443
+ </span>
444
+ </Link>
445
+ </div>
446
+ </li>
447
+ </ul>
448
+ </div>
449
+ <div className="space-y-5">
450
+ <h3 className="overline-medium font-semibold text-plum-400">
451
+ Certify
452
+ </h3>
453
+ <ul className="space-y-4">
454
+ <li>
455
+ <Link
456
+ to="/"
457
+ className="body-base block font-medium text-gray-100 hover:text-white"
458
+ >
459
+ WELL Certification
460
+ </Link>
461
+ </li>
462
+ <li>
463
+ <Link
464
+ to="/"
465
+ className="text-gray-100 hover:text-white flex items-center justify-start body-base font-medium"
466
+ >
467
+ WELL Residence
468
+ <span className="overline-small text-[#F0AA99] ml-1">
469
+ PILOT
470
+ </span>
471
+ </Link>
472
+ </li>
473
+ </ul>
474
+ </div>
475
+ <div className="space-y-5">
476
+ <h3 className="overline-medium font-semibold text-plum-400">
477
+ Get rated
478
+ </h3>
479
+ <ul className="space-y-4">
480
+ <li>
481
+ <Link
482
+ to="/"
483
+ className="body-base block font-medium text-gray-100 hover:text-white"
484
+ >
485
+ WELL Ratings
486
+ </Link>
487
+ </li>
488
+ <li>
489
+ <div className="flex items-center gap-3 pl-[6px]">
490
+ <NavBullet color="#F3E7D8" />
491
+ <Link
492
+ to="/"
493
+ className="body-small font-medium text-gray-100"
494
+ >
495
+ Health-Safety Rating
496
+ </Link>
497
+ </div>
498
+ </li>
499
+ <li>
500
+ <div className="flex items-center gap-3 pl-[6px]">
501
+ <NavBullet color="#0F748A" />
502
+ <Link
503
+ to="/"
504
+ className="body-small font-medium text-gray-100"
505
+ >
506
+ Performance Rating
507
+ </Link>
508
+ </div>
509
+ </li>
510
+ <li>
511
+ <div className="flex items-center gap-3 pl-[6px]">
512
+ <NavBullet color="#17AA8D" />
513
+ <Link
514
+ to="/"
515
+ className="body-small font-medium text-gray-100"
516
+ >
517
+ Equity Rating
518
+ </Link>
519
+ </div>
520
+ </li>
521
+ </ul>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ )}
526
+
527
+ {/* Network Tray */}
528
+ {activeItem === 3 && (
529
+ <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
530
+ <h2
531
+ className="heading-xsmall py-1"
532
+ style={{
533
+ background:
534
+ "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
535
+ WebkitBackgroundClip: "text",
536
+ WebkitTextFillColor: "transparent",
537
+ }}
538
+ >
539
+ Our network drives our movement
540
+ </h2>
541
+
542
+ <div className="flex gap-x-20">
543
+ <div className="space-y-5">
544
+ <h3 className="overline-medium font-semibold text-plum-400">
545
+ JOIN
546
+ </h3>
547
+ <ul className="space-y-4">
548
+ <li>
549
+ <Link
550
+ to="/"
551
+ className="body-base block font-medium text-gray-100 hover:text-white"
552
+ >
553
+ Membership
554
+ </Link>
555
+ </li>
556
+ <li>
557
+ <Link
558
+ to="/"
559
+ className="body-base block font-medium text-gray-100 hover:text-white"
560
+ >
561
+ Works with WELL
562
+ </Link>
563
+ </li>
564
+ <li>
565
+ <div className="flex items-center gap-3 pl-[6px]">
566
+ <NavBullet color="#2E74AD" />
567
+ <Link
568
+ to="/"
569
+ className="body-small font-medium text-gray-100"
570
+ >
571
+ Enterprise Provider
572
+ </Link>
573
+ </div>
574
+ </li>
575
+ <li>
576
+ <div className="flex items-center gap-3 pl-[6px]">
577
+ <NavBullet color="#149EBD" />
578
+ <Link
579
+ to="/"
580
+ className="body-small font-medium text-gray-100"
581
+ >
582
+ Product Provider
583
+ </Link>
584
+ </div>
585
+ </li>
586
+ <li>
587
+ <div className="flex items-center gap-3 pl-[6px]">
588
+ <NavBullet color="#ED896F" />
589
+ <Link
590
+ to="/"
591
+ className="body-small font-medium text-gray-100"
592
+ >
593
+ Performance Testing Provider
594
+ </Link>
595
+ </div>
596
+ </li>
597
+ </ul>
598
+ </div>
599
+
600
+ <div className="space-y-5">
601
+ <h3 className="overline-medium font-semibold text-plum-400">
602
+ EARN
603
+ </h3>
604
+ <ul className="space-y-4">
605
+ <li>
606
+ <Link
607
+ to="/"
608
+ className="body-base block font-medium text-gray-100 hover:text-white"
609
+ >
610
+ WELL AP
611
+ </Link>
612
+ </li>
613
+ <li>
614
+ <Link
615
+ to="/"
616
+ className="body-base block font-medium text-gray-100 hover:text-white"
617
+ >
618
+ WELL Faculty
619
+ </Link>
620
+ </li>
621
+ </ul>
622
+ </div>
623
+ </div>
624
+ </div>
625
+ )}
626
+
627
+ {/* Knowledge Tray */}
628
+ {activeItem === 4 && (
629
+ <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
630
+ <h2
631
+ className="heading-xsmall py-1"
632
+ style={{
633
+ background:
634
+ "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
635
+ WebkitBackgroundClip: "text",
636
+ WebkitTextFillColor: "transparent",
637
+ }}
638
+ >
639
+ Learn from the experts on health
640
+ </h2>
641
+
642
+ <div className="flex gap-x-20">
643
+ <div className="space-y-5">
644
+ <h3 className="overline-medium font-semibold text-plum-400">
645
+ LEARN
646
+ </h3>
647
+ <ul className="space-y-4">
648
+ <li>
649
+ <Link
650
+ to="/"
651
+ className="body-base block font-medium text-gray-100 hover:text-white"
652
+ >
653
+ WELL Forum
654
+ </Link>
655
+ </li>
656
+ <li>
657
+ <div className="flex items-center gap-3 pl-[6px]">
658
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
659
+ <Link
660
+ to="/"
661
+ className="body-small font-medium text-gray-100"
662
+ >
663
+ Threads
664
+ </Link>
665
+ </div>
666
+ </li>
667
+ <li>
668
+ <div className="flex items-center gap-3 pl-[6px]">
669
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
670
+ <Link
671
+ to="/"
672
+ className="body-small font-medium text-gray-100"
673
+ >
674
+ Webcasts
675
+ </Link>
676
+ </div>
677
+ </li>
678
+ <li>
679
+ <div className="flex items-center gap-3 pl-[6px]">
680
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
681
+ <Link
682
+ to="/"
683
+ className="body-small font-medium text-gray-100"
684
+ >
685
+ Trainings
686
+ </Link>
687
+ </div>
688
+ </li>
689
+ </ul>
690
+ </div>
691
+ <div className="space-y-5">
692
+ <h3 className="overline-medium font-semibold text-plum-400">
693
+ ATTEND
694
+ </h3>
695
+ <ul className="space-y-4">
696
+ <li>
697
+ <Link
698
+ to="/"
699
+ className="body-base block font-medium text-gray-100 hover:text-white"
700
+ >
701
+ WELL 2025
702
+ </Link>
703
+ </li>
704
+ <li>
705
+ <div className="flex items-center gap-3 pl-[6px]">
706
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
707
+ <Link
708
+ to="/"
709
+ className="body-small font-medium text-gray-100"
710
+ >
711
+ Flagship events
712
+ </Link>
713
+ </div>
714
+ </li>
715
+ <li>
716
+ <div className="flex items-center gap-3 pl-[6px]">
717
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
718
+ <Link
719
+ to="/"
720
+ className="body-small font-medium text-gray-100"
721
+ >
722
+ Thematic summits
723
+ </Link>
724
+ </div>
725
+ </li>
726
+ <li>
727
+ <div className="flex items-center gap-3 pl-[6px]">
728
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
729
+ <Link
730
+ to="/"
731
+ className="body-small font-medium text-gray-100"
732
+ >
733
+ Regional summits
734
+ </Link>
735
+ </div>
736
+ </li>
737
+ </ul>
738
+ </div>
739
+ <div className="space-y-5">
740
+ <h3 className="overline-medium font-semibold text-plum-400">
741
+ GUIDANCE
742
+ </h3>
743
+ <ul className="space-y-4">
744
+ <li>
745
+ <Link
746
+ to="/"
747
+ className="body-base block font-medium text-gray-100 hover:text-white"
748
+ >
749
+ Knowledge base
750
+ </Link>
751
+ </li>
752
+ <li>
753
+ <div className="flex items-center gap-3 pl-[6px]">
754
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
755
+ <Link
756
+ to="/"
757
+ className="body-small font-medium text-gray-100"
758
+ >
759
+ Tutorials
760
+ </Link>
761
+ </div>
762
+ </li>
763
+ <li>
764
+ <div className="flex items-center gap-3 pl-[6px]">
765
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
766
+ <Link
767
+ to="/"
768
+ className="body-small font-medium text-gray-100"
769
+ >
770
+ Guides
771
+ </Link>
772
+ </div>
773
+ </li>
774
+ <li>
775
+ <div className="flex items-center gap-3 pl-[6px]">
776
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
777
+ <Link
778
+ to="/"
779
+ className="body-small font-medium text-gray-100"
780
+ >
781
+ FAQs
782
+ </Link>
783
+ </div>
784
+ </li>
785
+ </ul>
786
+ </div>
787
+ <div className="space-y-5">
788
+ <h3 className="overline-medium font-semibold text-plum-400">
789
+ Resources
790
+ </h3>
791
+ <ul className="space-y-4">
792
+ <li>
793
+ <Link
794
+ to="/"
795
+ className="body-base block font-medium text-gray-100 hover:text-white"
796
+ >
797
+ Resource library
798
+ </Link>
799
+ </li>
800
+ <li>
801
+ <div className="flex items-center gap-3 pl-[6px]">
802
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
803
+ <Link
804
+ to="/"
805
+ className="body-small font-medium text-gray-100"
806
+ >
807
+ Technical tools
808
+ </Link>
809
+ </div>
810
+ </li>
811
+ <li>
812
+ <div className="flex items-center gap-3 pl-[6px]">
813
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
814
+ <Link
815
+ to="/"
816
+ className="body-small font-medium text-gray-100"
817
+ >
818
+ Sales tools
819
+ </Link>
820
+ </div>
821
+ </li>
822
+ <li>
823
+ <div className="flex items-center gap-3 pl-[6px]">
824
+ <div className="h-1 w-1 rounded-full bg-gray-500" />
825
+ <Link
826
+ to="/"
827
+ className="body-small font-medium text-gray-100"
828
+ >
829
+ Media
830
+ </Link>
831
+ </div>
832
+ </li>
833
+ </ul>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ )}
838
+
839
+ {/* IWBI Tray */}
840
+ {activeItem === 5 && (
841
+ <div className="col-span-full row-span-full container-lg mx-auto space-y-6 py-6 transition-opacity duration-200 ease-in-out">
842
+ <h2
843
+ className="heading-xsmall py-1"
844
+ style={{
845
+ background:
846
+ "linear-gradient(90deg, #41D5F6 0%, #3EECD1 25%, #66FCD9 50%, #66FCD9 75%, #3EECD1 100%)",
847
+ WebkitBackgroundClip: "text",
848
+ WebkitTextFillColor: "transparent",
849
+ }}
850
+ >
851
+ The International WELL Building Institute (IWBI)
852
+ </h2>
853
+
854
+ <div className="flex gap-x-20">
855
+ <div className="space-y-5">
856
+ <h3 className="overline-medium font-semibold text-plum-400">
857
+ About
858
+ </h3>
859
+ <ul className="space-y-4">
860
+ <li>
861
+ <Link
862
+ to="/"
863
+ className="body-base block font-medium text-gray-100 hover:text-white"
864
+ >
865
+ IWBI
866
+ </Link>
867
+ </li>
868
+ <li>
869
+ <Link
870
+ to="/"
871
+ className="body-base block font-medium text-gray-100 hover:text-white"
872
+ >
873
+ Research
874
+ </Link>
875
+ </li>
876
+ <li>
877
+ <Link
878
+ to="/"
879
+ className="body-base block font-medium text-gray-100 hover:text-white"
880
+ >
881
+ Advocacy
882
+ </Link>
883
+ </li>
884
+ </ul>
885
+ </div>
886
+ <div className="space-y-5">
887
+ <h3 className="overline-medium font-semibold text-plum-400">
888
+ Meet
889
+ </h3>
890
+ <ul className="space-y-4">
891
+ <li>
892
+ <Link
893
+ to="/"
894
+ className="body-base block font-medium text-gray-100 hover:text-white"
895
+ >
896
+ Team
897
+ </Link>
898
+ </li>
899
+ <li>
900
+ <Link
901
+ to="/"
902
+ className="body-base block font-medium text-gray-100 hover:text-white"
903
+ >
904
+ Advisories
905
+ </Link>
906
+ </li>
907
+ <li>
908
+ <Link
909
+ to="/"
910
+ className="body-base block font-medium text-gray-100 hover:text-white"
911
+ >
912
+ Governance Council
913
+ </Link>
914
+ </li>
915
+ </ul>
916
+ </div>
917
+ <div className="space-y-5">
918
+ <h3 className="overline-medium font-semibold text-plum-400">
919
+ Explore
920
+ </h3>
921
+ <ul className="space-y-4">
922
+ <li>
923
+ <Link
924
+ to="/"
925
+ className="body-base block font-medium text-gray-100 hover:text-white"
926
+ >
927
+ Newsroom
928
+ </Link>
929
+ </li>
930
+ <li>
931
+ <Link
932
+ to="/"
933
+ className="body-base block font-medium text-gray-100 hover:text-white"
934
+ >
935
+ Jobs
936
+ </Link>
937
+ </li>
938
+ <li>
939
+ <Link
940
+ to="/"
941
+ className="body-base block font-medium text-gray-100 hover:text-white"
942
+ >
943
+ Blog
944
+ </Link>
945
+ </li>
946
+ </ul>
947
+ </div>
948
+ </div>
949
+ </div>
950
+ )}
951
+ </motion.div>
952
+ </AnimatePresence>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ </nav>
957
+ );
958
+ };