@syscore/ui-library 1.3.7 → 1.4.0

package/client/components/icons/ConceptIcons.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { cn } from "../../lib/utils";
+import { conceptColors } from "../../lib/concept-colors";
 
 
 export interface ConceptColor {
@@ -10,79 +11,6 @@ export interface ConceptColor {
   contrast?: string;
 }
 
-// Define the concept colors matching Figma design
-export const conceptColors = {
-  mind: {
-    solid: "#0a5161",
-    light: "rgba(10,81,97,0.08)",
-    border: "rgba(10,81,97,0.16)",
-    prefix: "M",
-  },
-  community: {
-    solid: "#0f748a",
-    light: "rgba(15,116,138,0.12)",
-    border: "rgba(15,116,138,0.24)",
-    prefix: "C",
-  },
-  movement: {
-    solid: "#149ebd",
-    light: "rgba(20,158,189,0.12)",
-    border: "rgba(20,158,189,0.24)",
-    prefix: "V",
-  },
-  water: {
-    solid: "#39c9ea",
-    light: "rgba(57,201,234,0.12)",
-    border: "rgba(57,201,234,0.24)",
-    prefix: "W",
-  },
-  air: {
-    solid: "#87dff2",
-    light: "rgba(135,223,242,0.12)",
-    border: "rgba(135,223,242,0.24)",
-    prefix: "A",
-    contrast: "#7CCDDF",
-  },
-  light: {
-    solid: "#8aefdb",
-    light: "rgba(138,239,219,0.12)",
-    border: "rgba(138,239,219,0.24)",
-    prefix: "L",
-    contrast: "#7FDCC9",
-  },
-  thermalComfort: {
-    solid: "#3eddbf",
-    light: "rgba(62,221,191,0.12)",
-    border: "rgba(62,221,191,0.24)",
-    prefix: "T",
-    contrast: "#39CBB0",
-  },
-  nourishment: {
-    solid: "#17aa8d",
-    light: "rgba(23,170,141,0.12)",
-    border: "rgba(23,170,141,0.24)",
-    prefix: "N",
-  },
-  sound: {
-    solid: "#0c705c",
-    light: "rgba(12,112,92,0.12)",
-    border: "rgba(12,112,92,0.24)",
-    prefix: "S",
-  },
-  materials: {
-    solid: "#0a4f41",
-    light: "rgba(10,79,65,0.08)",
-    border: "rgba(10,79,65,0.16)",
-    prefix: "X",
-  },
-  innovation: {
-    solid: "#52545D",
-    light: "rgba(82,84,93,0.08)",
-    border: "rgba(82,84,93,0.16)",
-    prefix: "I",
-  },
-} as const;
-
 
 const DEFAULT_FILL = "#EFF5FB";
 const DEFAULT_STROKE = "#2E74AD";
@@ -476,7 +404,7 @@ export const IconConceptThermalComfort: React.FC<ConceptIconProps> = ({
   outlined = false,
 }) => {
   const conceptColor =
-    conceptColors.thermalComfort?.contrast || conceptColors.thermalComfort.solid;
+    conceptColors["thermal-comfort"].contrast || conceptColors["thermal-comfort"].solid;
   const bgFill = outlined ? "white" : active ? conceptColor : DEFAULT_FILL;
   const strokeColor = outlined ? conceptColor : active ? "white" : DEFAULT_STROKE;
 

package/client/components/ui/hero-section.tsx

@@ -0,0 +1,45 @@
+import { Button } from "./button"
+import { motion } from "motion/react"
+
+interface HeroSectionProps {
+    backgroundSlot?: React.ReactNode;
+    contentSlot?: React.ReactNode;
+}
+
+export const HeroSection = ({ backgroundSlot, contentSlot }: HeroSectionProps) => {
+    return (
+        <section className="relative flex flex-col sm:pt-[169px] pt-24 items-center min-h-[454px] bg-cyan-900 overflow-hidden">
+            {backgroundSlot}
+
+            {/* Hero Content */}
+            <header className="relative z-10 flex flex-col items-center text-center overflow-visible">
+                <motion.h2
+                    className="heading-small mb-6"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.3 }}
+                >
+                    <span
+                        style={{
+                            background: "linear-gradient(90deg, #084654 0.08%, #2D718A 50.08%, #084654 100.08%)",
+                            backgroundClip: "text",
+                            WebkitBackgroundClip: "text",
+                            WebkitTextFillColor: "transparent",
+                        }}
+                    >
+                        One unified, harmonized standard
+                    </span>
+                </motion.h2>
+                <motion.h1
+                    className="text-white heading-large mb-[70px]"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.6, delay: 0.4 }}
+                >
+                    One WELL
+                </motion.h1>
+                {contentSlot}
+            </header>
+        </section>
+    )
+}

package/client/components/ui/navigation.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { cn } from "@/lib/utils";
-import { UtilityClose } from "../icons/UtilityClose";
 import { NavLogo } from "../icons/NavLogo";
 import { NavAccount } from "../icons/NavAccount";
 import { NavBullet } from "../icons/NavBullet";
 import { Button } from "@/components/ui/button";
-
+import { UtilityClearRegular } from "../icons/UtilityClearRegular";
+import { StandardLogo } from "../icons/StandardLogo";
 export interface NavItem {
   label: string;
   active?: boolean;
@@ -21,20 +21,170 @@ export type LinkComponent = React.ComponentType<{
   onClick?: (e: React.MouseEvent) => void;
 }>;
 
+interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  LinkComponent?: LinkComponent;
+  onLinkClick?: (href: string) => void;
+}
+
+const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
+  ({ href, LinkComponent, onLinkClick, children, ...props }, ref) => {
+    if (LinkComponent) {
+      return (
+        <LinkComponent
+          href={href}
+          className={props.className}
+          aria-label={props["aria-label"]}
+        >
+          {children}
+        </LinkComponent>
+      );
+    }
+
+    if (onLinkClick) {
+      return (
+        <a
+          ref={ref}
+          href={href}
+          {...props}
+          onClick={(e) => {
+            e.preventDefault();
+            onLinkClick(href);
+          }}
+        >
+          {children}
+        </a>
+      );
+    }
+
+    return (
+      <a ref={ref} href={href} {...props}>
+        {children}
+      </a>
+    );
+  }
+);
+NavLink.displayName = "NavLink";
+
 interface NavigationProps {
   navItems?: NavItem[];
   isStrategy?: boolean;
   Link?: LinkComponent; // Optional Link component from routing library
   onLinkClick?: (href: string) => void; // Fallback callback for navigation
   onClose?: () => void;
+  pathname: string;
 }
 
+const ALPHA_PATH =
+  "M5.3387 0.0229882C5.37971 0.0229882 5.45295 0.0199228 5.5584 0.0137925C5.66386 0.00459714 5.74442 0 5.80007 0C6.72867 0 7.49908 0.269732 8.11131 0.809196C8.72354 1.34559 9.14097 2.09195 9.3636 3.04828C9.44855 3.47433 9.49835 3.96628 9.513 4.52414V5.16782C10.2014 4.07663 10.7287 2.85517 11.0948 1.50345C11.1505 1.29808 11.1959 1.17701 11.2311 1.14023C11.2662 1.10345 11.3761 1.08506 11.5606 1.08506C11.8535 1.08506 12 1.13563 12 1.23678C12 1.25211 11.9722 1.37778 11.9165 1.61379C11.5093 3.24751 10.7931 4.77701 9.76785 6.2023L9.53497 6.51034L9.55694 7.04368C9.59795 8.23295 9.72391 8.9318 9.93482 9.14023C9.97583 9.16782 10.0388 9.18161 10.1238 9.18161C10.32 9.15402 10.5031 9.06973 10.673 8.92874C10.8429 8.78774 10.963 8.62222 11.0333 8.43218C11.0597 8.32797 11.0948 8.26513 11.1388 8.24368C11.1798 8.22222 11.2852 8.21149 11.4551 8.21149C11.7364 8.21149 11.877 8.27739 11.877 8.40919C11.877 8.49808 11.8345 8.63142 11.7495 8.8092C11.5943 9.13103 11.3687 9.4069 11.0729 9.63678C10.777 9.8636 10.4475 9.97701 10.0842 9.97701H9.93482C8.97986 9.97701 8.3398 9.44674 8.01465 8.38621L7.95313 8.23448C7.20615 8.74942 6.79165 9.02835 6.70963 9.07126C5.66679 9.69042 4.61809 10 3.56353 10C2.56756 10 1.76346 9.70575 1.15123 9.11724C0.538997 8.52874 0.162578 7.75632 0.02197 6.8C0.0073233 6.71111 0 6.54866 0 6.31264C0 5.9295 0.02197 5.62146 0.0659099 5.38851C0.276822 4.06437 0.887587 2.8751 1.89821 1.82069C2.91175 0.769348 4.05859 0.170115 5.3387 0.0229882ZM1.83669 7.10805C1.83669 7.73946 1.9978 8.24368 2.32003 8.62069C2.64518 8.99464 3.09484 9.18161 3.66899 9.18161C4.03515 9.18161 4.44379 9.12337 4.89491 9.0069C5.6829 8.80153 6.44892 8.4046 7.19297 7.81609C7.29257 7.74253 7.38777 7.66437 7.47858 7.58161C7.56939 7.50192 7.64262 7.43295 7.69828 7.37471L7.78176 7.28276L7.76419 7.08506C7.76419 6.95326 7.75979 6.75862 7.75101 6.50115C7.74515 6.24368 7.74222 5.98927 7.74222 5.73793C7.72757 5.18008 7.71732 4.74636 7.71146 4.43678C7.70267 4.1272 7.67338 3.74866 7.62358 3.30115C7.57671 2.85364 7.5108 2.50728 7.42585 2.26207C7.3409 2.01992 7.22519 1.77471 7.07873 1.52644C6.92933 1.2751 6.73892 1.09425 6.50751 0.983908C6.27609 0.873563 6.00513 0.81839 5.69462 0.81839C4.72501 0.81839 3.87404 1.35479 3.14171 2.42759C2.79019 2.97318 2.49579 3.71647 2.25851 4.65747C1.9773 5.73333 1.83669 6.55019 1.83669 7.10805Z";
+
+const PATH_LENGTH = 60;
+
+const AlphaIcon = ({ dark }: { dark?: boolean }) => {
+  if (dark) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="10"
+        viewBox="0 0 12 10"
+        fill="none"
+        className="mt-1.5"
+        style={{ overflow: "visible" }}
+      >
+        <path d={ALPHA_PATH} fill="currentColor" />
+        {/* Animated stroke trace */}
+        {/* <motion.path
+          d={ALPHA_PATH}
+          fill="none"
+          stroke="#282A31"
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          initial={{ strokeDashoffset: PATH_LENGTH }}
+          animate={{ strokeDashoffset: -PATH_LENGTH }}
+          style={{ strokeDasharray: `8 ${PATH_LENGTH - 8}` }}
+          transition={{
+            duration: 4,
+            repeat: Infinity,
+            ease: "linear",
+          }}
+        /> */}
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      fill="none"
+      className="mt-1.5"
+      style={{ overflow: "visible" }}
+    >
+      {/* Base fill with gradient */}
+      <path
+        d={ALPHA_PATH}
+        fill="url(#paint0_linear_10081_30848)"
+        opacity="0.4"
+      />
+      {/* Animated stroke trace with gradient */}
+      <motion.path
+        d={ALPHA_PATH}
+        fill="none"
+        stroke="url(#stroke_gradient)"
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        initial={{ strokeDashoffset: PATH_LENGTH }}
+        animate={{ strokeDashoffset: -PATH_LENGTH }}
+        style={{ strokeDasharray: `8 ${PATH_LENGTH - 8}` }}
+        transition={{
+          duration: 2,
+          repeat: Infinity,
+          repeatDelay: 8,
+          ease: "linear",
+        }}
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_10081_30848"
+          x1="-3.27254"
+          y1="4.99923"
+          x2="6.36738"
+          y2="-2.36962"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#8AEFDB" />
+          <stop offset="0.5" stopColor="#D4BACE" />
+          <stop offset="1" stopColor="#CBE0F1" />
+        </linearGradient>
+        <linearGradient
+          id="stroke_gradient"
+          x1="0"
+          y1="0"
+          x2="12"
+          y2="10"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#8AEFDB" />
+          <stop offset="0.5" stopColor="#D4BACE" />
+          <stop offset="1" stopColor="#CBE0F1" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
 export const Navigation: React.FC<NavigationProps> = ({
   navItems,
   isStrategy = false,
   Link: LinkComponent,
   onLinkClick,
   onClose,
+  pathname,
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState<number | null>(null);
@@ -44,6 +194,8 @@ export const Navigation: React.FC<NavigationProps> = ({
   const menuItemsRef = React.useRef<HTMLDivElement>(null);
   const overlayRef = React.useRef<HTMLDivElement>(null);
 
+  const isHomepage = pathname === "/";
+
   const handleMouseLeave = () => {
     setIsOpen(false);
     setActiveItem(null);
@@ -112,34 +264,43 @@ export const Navigation: React.FC<NavigationProps> = ({
 
       <div className="navigation-container">
         <div className="navigation-logo-container">
-          {isStrategy ? (
-            <Button
-              className="navigation-close-button"
-              size="icon"
-              onClick={(e) => {
-                e.preventDefault();
-                if (onClose) {
-                  onClose();
-                } else if (onLinkClick) {
-                  onLinkClick("/");
-                }
-              }}
-            >
-              <UtilityClose className="navigation-close-icon" />
-            </Button>
-          ) : null}
-
-          <NavLink
-            href="/"
-            className={cn(
-              "navigation-logo-link",
-              isStrategy && "navigation-logo-link--strategy",
+          <AnimatePresence mode="popLayout">
+            {!isHomepage && (
+              <motion.div
+                layout
+                initial={{ opacity: 0, scale: 0.8 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.8 }}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+                style={{ willChange: "transform, opacity" }}
+              >
+                <Button
+                  size="icon"
+                  className=" mr-6"
+                  onClick={() => onClose?.()}
+                >
+                  <UtilityClearRegular />
+                </Button>
+              </motion.div>
             )}
-            data-strategy={isStrategy}
-            aria-label="Home"
+          </AnimatePresence>
+
+          <motion.div
+            layout
+            transition={{ duration: 0.2, ease: "easeOut" }}
           >
-            <NavLogo dark={isStrategy} />
-          </NavLink>
+            <NavLink
+              href="/"
+              className={cn("navigation-logo-link")}
+              data-strategy={isStrategy}
+              aria-label="Home"
+            >
+              <NavLogo dark={isStrategy} />
+
+              <StandardLogo className={cn(!isStrategy ? "text-white" : "text-black")} />
+              <AlphaIcon dark={isStrategy} />
+            </NavLink>
+          </motion.div>
         </div>
 
         {!isStrategy ? (
@@ -147,54 +308,54 @@ export const Navigation: React.FC<NavigationProps> = ({
             <ul className="navigation-nav-list">
               {navItems
                 ? navItems.map((item, index) => (
-                    <li
-                      key={index + 1}
-                      className="navigation-nav-item"
-                      onMouseEnter={() => handleNavItemMouseEnter(index)}
-                    >
-                      <span className="navigation-nav-link">{item.label}</span>
-
-                      {/* Underline */}
-                      {activeItem === index + 1 && (
-                        <motion.div
-                          id="underline"
-                          className="navigation-underline"
-                          layoutId="underline"
-                          transition={{ duration: 0.2, ease: "easeOut" }}
-                        >
-                          <div
-                            className="navigation-underline-circle navigation-underline-circle--gradient"
-                            style={{
-                              width: "10px",
-                              height: "5px",
-                              borderBottomLeftRadius: "100px",
-                              borderBottomRightRadius: "100px",
-                              borderBottom: "0",
-                              boxSizing: "border-box",
-                            }}
-                          />
-                        </motion.div>
-                      )}
-                      {index === 0 && (
+                  <li
+                    key={index + 1}
+                    className="navigation-nav-item"
+                    onMouseEnter={() => handleNavItemMouseEnter(index)}
+                  >
+                    <span className="navigation-nav-link">{item.label}</span>
+
+                    {/* Underline */}
+                    {activeItem === index + 1 && (
+                      <motion.div
+                        id="underline"
+                        className="navigation-underline"
+                        layoutId="underline"
+                        transition={{ duration: 0.2, ease: "easeOut" }}
+                      >
+                        <div
+                          className="navigation-underline-circle navigation-underline-circle--gradient"
+                          style={{
+                            width: "10px",
+                            height: "5px",
+                            borderBottomLeftRadius: "100px",
+                            borderBottomRightRadius: "100px",
+                            borderBottom: "0",
+                            boxSizing: "border-box",
+                          }}
+                        />
+                      </motion.div>
+                    )}
+                    {index === 0 && (
+                      <div
+                        className="navigation-underline navigation-underline--static"
+                        style={{ transition: "all 0.2s ease-out" }}
+                      >
                         <div
-                          className="navigation-underline navigation-underline--static"
-                          style={{ transition: "all 0.2s ease-out" }}
-                        >
-                          <div
-                            className="navigation-underline-circle navigation-underline-circle--white"
-                            style={{
-                              width: "10px",
-                              height: "5px",
-                              borderTopLeftRadius: "100px",
-                              borderTopRightRadius: "100px",
-                              borderBottom: "0",
-                              boxSizing: "border-box",
-                            }}
-                          />
-                        </div>
-                      )}
-                    </li>
-                  ))
+                          className="navigation-underline-circle navigation-underline-circle--white"
+                          style={{
+                            width: "10px",
+                            height: "5px",
+                            borderTopLeftRadius: "100px",
+                            borderTopRightRadius: "100px",
+                            borderBottom: "0",
+                            boxSizing: "border-box",
+                          }}
+                        />
+                      </div>
+                    )}
+                  </li>
+                ))
                 : null}
             </ul>
           </div>
@@ -204,7 +365,7 @@ export const Navigation: React.FC<NavigationProps> = ({
           <NavLink
             href="/"
             aria-label="Account link"
-            className="navigation-account-link"
+            className={cn("navigation-account-link", isStrategy && "navigation-account-link--strategy")}
             data-open={isOpen}
             data-strategy={isStrategy}
           >

package/client/global.css

@@ -6054,7 +6054,7 @@ body {
 }
 
 .navigation-overlay[data-open="false"] {
-  transform: translateY(calc(-100% + 56px));
+  transform: translateY(calc(-100% + 64px));
   background-color: rgba(0, 0, 0, 0.16);
 }
 
@@ -6066,11 +6066,16 @@ body {
   padding-left: 2rem;
   padding-right: 2rem;
   display: flex;
-  height: 3.5rem;
+  height: 4rem;
   align-items: center;
   justify-content: space-between;
 }
 
+.navigation--strategy {
+  background-color: var(--color-gray-50, #f9f9fa);
+  border-bottom: 1px solid var(--color-gray-100, #eff1f2);
+}
+
 .navigation-logo-container {
   display: flex;
   height: 100%;
@@ -6155,10 +6160,16 @@ body {
   justify-content: center;
   border-radius: 9999px;
   transition: background-color 200ms;
+  background-color: rgba(255, 255, 255, 0.12);
+}
+
+.navigation-account-link--strategy {
+  background-color: var(--color-white, #fff);
+  border: 1px solid var(--color-gray-100, #eff1f2);
 }
 
 .navigation-account-link[data-open="false"] {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: rgba(255, 255, 255, 0.12);
 }
 
 .navigation-account-link[data-open="true"] {

package/client/lib/concept-colors.ts

@@ -0,0 +1,115 @@
+export interface ConceptColor {
+  solid: string;
+  light: string;
+  border: string;
+  prefix: string;
+  contrast?: string;
+}
+
+/**
+ * Concept colors matching Figma design.
+ * Keys match URL slugs for direct lookup.
+ */
+export const conceptColors = {
+  mind: {
+    solid: "#0a5161",
+    light: "rgba(10,81,97,0.08)",
+    border: "rgba(10,81,97,0.16)",
+    prefix: "M",
+  },
+  community: {
+    solid: "#0f748a",
+    light: "rgba(15,116,138,0.12)",
+    border: "rgba(15,116,138,0.24)",
+    prefix: "C",
+  },
+  movement: {
+    solid: "#149ebd",
+    light: "rgba(20,158,189,0.12)",
+    border: "rgba(20,158,189,0.24)",
+    prefix: "V",
+  },
+  water: {
+    solid: "#39c9ea",
+    light: "rgba(57,201,234,0.12)",
+    border: "rgba(57,201,234,0.24)",
+    prefix: "W",
+  },
+  air: {
+    solid: "#87dff2",
+    light: "rgba(135,223,242,0.12)",
+    border: "rgba(135,223,242,0.24)",
+    prefix: "A",
+    contrast: "#7CCDDF",
+  },
+  light: {
+    solid: "#8aefdb",
+    light: "rgba(138,239,219,0.12)",
+    border: "rgba(138,239,219,0.24)",
+    prefix: "L",
+    contrast: "#7FDCC9",
+  },
+  "thermal-comfort": {
+    solid: "#3eddbf",
+    light: "rgba(62,221,191,0.12)",
+    border: "rgba(62,221,191,0.24)",
+    prefix: "T",
+    contrast: "#39CBB0",
+  },
+  nourishment: {
+    solid: "#17aa8d",
+    light: "rgba(23,170,141,0.12)",
+    border: "rgba(23,170,141,0.24)",
+    prefix: "N",
+  },
+  sound: {
+    solid: "#0c705c",
+    light: "rgba(12,112,92,0.12)",
+    border: "rgba(12,112,92,0.24)",
+    prefix: "S",
+  },
+  materials: {
+    solid: "#0a4f41",
+    light: "rgba(10,79,65,0.08)",
+    border: "rgba(10,79,65,0.16)",
+    prefix: "X",
+  },
+  innovation: {
+    solid: "#52545D",
+    light: "rgba(82,84,93,0.08)",
+    border: "rgba(82,84,93,0.16)",
+    prefix: "I",
+  },
+} as const;
+
+export type ConceptType = keyof typeof conceptColors;
+
+/**
+ * Get concept color by slug.
+ * @example getConceptColor("thermal-comfort") → { solid: "#3eddbf", ... }
+ */
+export function getConceptColor(slug: string): ConceptColor {
+  return conceptColors[slug as ConceptType] ?? conceptColors.mind;
+}
+
+/**
+ * Get concept color from a strategy code (e.g. "C7.4" → community colors).
+ * @example getConceptColorsFromCode("C7.4") → { solid: "#0f748a", ... }
+ */
+export function getConceptColorsFromCode(code: string): ConceptColor {
+  const prefixMap: Record<string, ConceptType> = {
+    M: "mind",
+    C: "community",
+    V: "movement",
+    W: "water",
+    A: "air",
+    L: "light",
+    T: "thermal-comfort",
+    N: "nourishment",
+    S: "sound",
+    X: "materials",
+    I: "innovation",
+  };
+  const slug = prefixMap[code.charAt(0).toUpperCase()] || "community";
+  return conceptColors[slug];
+}