keystone-design-bootstrap 1.0.3

package/src/design_system/elements/textarea/textarea.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import type { ReactNode, Ref } from "react";
+import React from "react";
+import type { TextAreaProps as AriaTextAreaProps, TextFieldProps as AriaTextFieldProps } from "react-aria-components";
+import { TextArea as AriaTextArea, TextField as AriaTextField } from "react-aria-components";
+import { HintText } from '../input/hint-text';
+import { Label } from '../input/label';
+import { cx } from '../../../utils/cx';
+
+// Creates a data URL for an SVG resize handle with a given color.
+const getResizeHandleBg = (color: string) => {
+    return `url(data:image/svg+xml;base64,${btoa(`<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 10" stroke="${color}" stroke-linecap="round"/><path d="M11 7L7 11" stroke="${color}" stroke-linecap="round"/></svg>`)})`;
+};
+
+interface TextAreaBaseProps extends AriaTextAreaProps {
+    ref?: Ref<HTMLTextAreaElement>;
+}
+
+export const TextAreaBase = ({ className, ...props }: TextAreaBaseProps) => {
+    return (
+        <AriaTextArea
+            {...props}
+            style={
+                {
+                    "--resize-handle-bg": getResizeHandleBg("#D5D7DA"),
+                    "--resize-handle-bg-dark": getResizeHandleBg("#373A41"),
+                } as React.CSSProperties
+            }
+            className={(state) =>
+                cx(
+                    "w-full scroll-py-3 rounded-lg bg-primary px-3.5 py-3 text-md text-primary shadow-xs ring-1 ring-primary transition duration-100 ease-linear ring-inset placeholder:text-placeholder autofill:rounded-lg autofill:text-primary focus:outline-hidden",
+
+                    // Resize handle
+                    "[&::-webkit-resizer]:bg-(image:--resize-handle-bg) [&::-webkit-resizer]:bg-contain dark:[&::-webkit-resizer]:bg-(image:--resize-handle-bg-dark)",
+
+                    state.isFocused && !state.isDisabled && "ring-2 ring-brand",
+                    state.isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled ring-disabled",
+                    state.isInvalid && "ring-error_subtle",
+                    state.isInvalid && state.isFocused && "ring-2 ring-error",
+
+                    typeof className === "function" ? className(state) : className,
+                )
+            }
+        />
+    );
+};
+
+TextAreaBase.displayName = "TextAreaBase";
+
+interface TextFieldProps extends AriaTextFieldProps {
+    /** Label text for the textarea */
+    label?: string;
+    /** Helper text displayed below the textarea */
+    hint?: ReactNode;
+    /** Tooltip message displayed after the label. */
+    tooltip?: string;
+    /** Class name for the textarea wrapper */
+    textAreaClassName?: TextAreaBaseProps["className"];
+    /** Ref for the textarea wrapper */
+    ref?: Ref<HTMLDivElement>;
+    /** Ref for the textarea */
+    textAreaRef?: TextAreaBaseProps["ref"];
+    /** Whether to hide required indicator from label. */
+    hideRequiredIndicator?: boolean;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Visible height of textarea in rows . */
+    rows?: number;
+    /** Visible width of textarea in columns. */
+    cols?: number;
+}
+
+export const TextArea = ({
+    label,
+    hint,
+    tooltip,
+    textAreaRef,
+    hideRequiredIndicator,
+    textAreaClassName,
+    placeholder,
+    className,
+    rows,
+    cols,
+    ...props
+}: TextFieldProps) => {
+    return (
+        <AriaTextField
+            {...props}
+            className={(state) =>
+                cx("group flex h-max w-full flex-col items-start justify-start gap-1.5", typeof className === "function" ? className(state) : className)
+            }
+        >
+            {({ isInvalid, isRequired }) => (
+                <>
+                    {label && (
+                        <Label isRequired={hideRequiredIndicator ? !hideRequiredIndicator : isRequired} tooltip={tooltip}>
+                            {label}
+                        </Label>
+                    )}
+
+                    <TextAreaBase placeholder={placeholder} className={textAreaClassName} ref={textAreaRef} rows={rows} cols={cols} />
+
+                    {hint && <HintText isInvalid={isInvalid}>{hint}</HintText>}
+                </>
+            )}
+        </AriaTextField>
+    );
+};
+
+TextArea.displayName = "TextArea";

package/src/design_system/elements/toggle/toggle.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type { SwitchProps as AriaSwitchProps } from "react-aria-components";
+import { Switch as AriaSwitch } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+interface ToggleBaseProps {
+    size?: "sm" | "md";
+    slim?: boolean;
+    className?: string;
+    isHovered?: boolean;
+    isFocusVisible?: boolean;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+}
+
+export const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelected, slim, size = "sm" }: ToggleBaseProps) => {
+    const styles = {
+        default: {
+            sm: {
+                root: "h-5 w-9 p-0.5",
+                switch: cx("size-4", isSelected && "translate-x-4"),
+            },
+            md: {
+                root: "h-6 w-11 p-0.5",
+                switch: cx("size-5", isSelected && "translate-x-5"),
+            },
+        },
+        slim: {
+            sm: {
+                root: "h-4 w-8",
+                switch: cx("size-4", isSelected && "translate-x-4"),
+            },
+            md: {
+                root: "h-5 w-10",
+                switch: cx("size-5", isSelected && "translate-x-5"),
+            },
+        },
+    };
+
+    const classes = slim ? styles.slim[size] : styles.default[size];
+
+    return (
+        <div
+            className={cx(
+                "cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
+                isSelected && "bg-brand-solid",
+                isSelected && isHovered && "bg-brand-solid_hover",
+                isDisabled && "cursor-not-allowed bg-disabled",
+                isFocusVisible && "outline-2 outline-offset-2",
+
+                slim && "ring-1 ring-secondary ring-inset",
+                slim && isSelected && "ring-transparent",
+                classes.root,
+                className,
+            )}
+        >
+            <div
+                style={{
+                    transition: "transform 0.15s ease-in-out, translate 0.15s ease-in-out, border-color 0.1s linear, background-color 0.1s linear",
+                }}
+                className={cx(
+                    "rounded-full bg-fg-white shadow-sm",
+                    isDisabled && "bg-toggle-button-fg_disabled",
+
+                    slim && "shadow-xs",
+                    slim && "border border-toggle-border",
+                    slim && isSelected && "border-toggle-slim-border_pressed",
+                    slim && isSelected && isHovered && "border-toggle-slim-border_pressed-hover",
+
+                    classes.switch,
+                )}
+            />
+        </div>
+    );
+};
+
+interface ToggleProps extends AriaSwitchProps {
+    size?: "sm" | "md";
+    label?: string;
+    hint?: ReactNode;
+    slim?: boolean;
+}
+
+export const Toggle = ({ label, hint, className, size = "sm", slim, ...ariaSwitchProps }: ToggleProps) => {
+    const sizes = {
+        sm: {
+            root: "gap-2",
+            textWrapper: "",
+            label: "text-sm font-medium",
+            hint: "text-sm",
+        },
+        md: {
+            root: "gap-3",
+            textWrapper: "gap-0.5",
+            label: "text-md font-medium",
+            hint: "text-md",
+        },
+    };
+
+    return (
+        <AriaSwitch
+            {...ariaSwitchProps}
+            className={(renderProps) =>
+                cx(
+                    "flex w-max items-start",
+                    renderProps.isDisabled && "cursor-not-allowed",
+                    sizes[size].root,
+                    typeof className === "function" ? className(renderProps) : className,
+                )
+            }
+        >
+            {({ isSelected, isDisabled, isFocusVisible, isHovered }) => (
+                <>
+                    <ToggleBase
+                        slim={slim}
+                        size={size}
+                        isHovered={isHovered}
+                        isDisabled={isDisabled}
+                        isFocusVisible={isFocusVisible}
+                        isSelected={isSelected}
+                        className={slim ? "mt-0.5" : ""}
+                    />
+
+                    {(label || hint) && (
+                        <div className={cx("flex flex-col", sizes[size].textWrapper)}>
+                            {label && <p className={cx("text-secondary select-none", sizes[size].label)}>{label}</p>}
+                            {hint && (
+                                <span className={cx("text-tertiary", sizes[size].hint)} onClick={(event) => event.stopPropagation()}>
+                                    {hint}
+                                </span>
+                            )}
+                        </div>
+                    )}
+                </>
+            )}
+        </AriaSwitch>
+    );
+};

package/src/design_system/elements/tooltip/tooltip.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import type { ReactNode } from "react";
+import type {
+    ButtonProps as AriaButtonProps,
+    TooltipProps as AriaTooltipProps,
+    TooltipTriggerComponentProps as AriaTooltipTriggerComponentProps,
+} from "react-aria-components";
+import { Button as AriaButton, OverlayArrow as AriaOverlayArrow, Tooltip as AriaTooltip, TooltipTrigger as AriaTooltipTrigger } from "react-aria-components";
+import { cx } from '../../../utils/cx';
+
+interface TooltipProps extends AriaTooltipTriggerComponentProps, Omit<AriaTooltipProps, "children"> {
+    /**
+     * The title of the tooltip.
+     */
+    title: ReactNode;
+    /**
+     * The description of the tooltip.
+     */
+    description?: ReactNode;
+    /**
+     * Whether to show the arrow on the tooltip.
+     *
+     * @default false
+     */
+    arrow?: boolean;
+    /**
+     * Delay in milliseconds before the tooltip is shown.
+     *
+     * @default 300
+     */
+    delay?: number;
+}
+
+export const Tooltip = ({
+    title,
+    description,
+    children,
+    arrow = false,
+    delay = 300,
+    closeDelay = 0,
+    trigger,
+    isDisabled,
+    isOpen,
+    defaultOpen,
+    offset = 6,
+    crossOffset,
+    placement = "top",
+    onOpenChange,
+    ...tooltipProps
+}: TooltipProps) => {
+    const isTopOrBottomLeft = ["top left", "top end", "bottom left", "bottom end"].includes(placement);
+    const isTopOrBottomRight = ["top right", "top start", "bottom right", "bottom start"].includes(placement);
+    // Set negative cross offset for left and right placement to visually balance the tooltip.
+    const calculatedCrossOffset = isTopOrBottomLeft ? -12 : isTopOrBottomRight ? 12 : 0;
+
+    return (
+        <AriaTooltipTrigger {...{ trigger, delay, closeDelay, isDisabled, isOpen, defaultOpen, onOpenChange }}>
+            {children}
+
+            <AriaTooltip
+                {...tooltipProps}
+                offset={offset}
+                placement={placement}
+                crossOffset={crossOffset ?? calculatedCrossOffset}
+                className={({ isEntering, isExiting }) => cx(isEntering && "ease-out animate-in", isExiting && "ease-in animate-out")}
+            >
+                {({ isEntering, isExiting }) => (
+                    <div
+                        className={cx(
+                            "z-50 flex max-w-xs origin-(--trigger-anchor-point) flex-col items-start gap-1 rounded-lg bg-primary-solid px-3 shadow-lg will-change-transform",
+                            description ? "py-3" : "py-2",
+
+                            isEntering &&
+                                "ease-out animate-in fade-in zoom-in-95 in-placement-left:slide-in-from-right-0.5 in-placement-right:slide-in-from-left-0.5 in-placement-top:slide-in-from-bottom-0.5 in-placement-bottom:slide-in-from-top-0.5",
+                            isExiting &&
+                                "ease-in animate-out fade-out zoom-out-95 in-placement-left:slide-out-to-right-0.5 in-placement-right:slide-out-to-left-0.5 in-placement-top:slide-out-to-bottom-0.5 in-placement-bottom:slide-out-to-top-0.5",
+                        )}
+                    >
+                        <span className="text-xs font-semibold text-white">{title}</span>
+
+                        {description && <span className="text-xs font-medium text-tooltip-supporting-text">{description}</span>}
+
+                        {arrow && (
+                            <AriaOverlayArrow>
+                                <svg
+                                    viewBox="0 0 100 100"
+                                    className="size-2.5 fill-bg-primary-solid in-placement-left:-rotate-90 in-placement-right:rotate-90 in-placement-top:rotate-0 in-placement-bottom:rotate-180"
+                                >
+                                    <path d="M0,0 L35.858,35.858 Q50,50 64.142,35.858 L100,0 Z" />
+                                </svg>
+                            </AriaOverlayArrow>
+                        )}
+                    </div>
+                )}
+            </AriaTooltip>
+        </AriaTooltipTrigger>
+    );
+};
+
+interface TooltipTriggerProps extends AriaButtonProps {}
+
+export const TooltipTrigger = ({ children, className, ...buttonProps }: TooltipTriggerProps) => {
+    return (
+        <AriaButton {...buttonProps} className={(values) => cx("h-max w-max outline-hidden", typeof className === "function" ? className(values) : className)}>
+            {children}
+        </AriaButton>
+    );
+};

package/src/design_system/hooks/use-breakpoint.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const screens = {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+};
+
+/**
+ * Checks whether a particular Tailwind CSS viewport size applies.
+ *
+ * @param size The size to check, which must either be included in Tailwind CSS's
+ * list of default screen sizes, or added to the Tailwind CSS config file.
+ *
+ * @returns A boolean indicating whether the viewport size applies.
+ */
+export const useBreakpoint = (size: "sm" | "md" | "lg" | "xl" | "2xl") => {
+    const [matches, setMatches] = useState(typeof window !== "undefined" ? window.matchMedia(`(min-width: ${screens[size]})`).matches : true);
+
+    useEffect(() => {
+        const breakpoint = window.matchMedia(`(min-width: ${screens[size]})`);
+
+        setMatches(breakpoint.matches);
+
+        const handleChange = (value: MediaQueryListEvent) => setMatches(value.matches);
+
+        breakpoint.addEventListener("change", handleChange);
+        return () => breakpoint.removeEventListener("change", handleChange);
+    }, [size]);
+
+    return matches;
+};
+

package/src/design_system/hooks/use-resize-observer.ts

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+import type { RefObject } from "react";
+
+/**
+ * Checks if the ResizeObserver API is supported.
+ * @returns True if the ResizeObserver API is supported, false otherwise.
+ */
+function hasResizeObserver() {
+    return typeof window.ResizeObserver !== "undefined";
+}
+
+/**
+ * The options for the useResizeObserver hook.
+ */
+type useResizeObserverOptionsType<T> = {
+    /**
+     * The ref to the element to observe.
+     */
+    ref: RefObject<T | undefined | null> | undefined;
+    /**
+     * The box to observe.
+     */
+    box?: ResizeObserverBoxOptions;
+    /**
+     * The callback function to call when the size changes.
+     */
+    onResize: () => void;
+};
+
+/**
+ * A hook that observes the size of an element and calls a callback function when the size changes.
+ * @param options - The options for the hook.
+ */
+export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
+    const { ref, box, onResize } = options;
+
+    useEffect(() => {
+        const element = ref?.current;
+        if (!element) {
+            return;
+        }
+
+        if (!hasResizeObserver()) {
+            window.addEventListener("resize", onResize, false);
+
+            return () => {
+                window.removeEventListener("resize", onResize, false);
+            };
+        } else {
+            const resizeObserverInstance = new window.ResizeObserver((entries) => {
+                if (!entries.length) {
+                    return;
+                }
+
+                onResize();
+            });
+
+            resizeObserverInstance.observe(element, { box });
+
+            return () => {
+                if (element) {
+                    resizeObserverInstance.unobserve(element);
+                }
+            };
+        }
+    }, [onResize, ref, box]);
+}
+

package/src/design_system/logo/keystone-logo-minimal.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import type { SVGProps } from "react";
+import { useId } from "react";
+import { cx } from '../../utils/cx';
+
+export const KeystoneLogoMinimal = (props: SVGProps<SVGSVGElement>) => {
+    const id = useId();
+
+    return (
+        <svg viewBox="0 0 38 38" fill="none" {...props} className={cx("size-8 origin-center scale-[1.2]", props.className)}>
+            <g filter={`url(#filter0-${id})`}>
+                <g clipPath={`url(#clip0-${id})`}>
+                    <path
+                        d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
+                        fill="white"
+                    />
+                    <path
+                        d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
+                        fill={`url(#paint0_linear-${id})`}
+                        fillOpacity="0.2"
+                    />
+                    {/* Clean pistachio circle */}
+                    <circle cx="19" cy="19" r="8" fill={`url(#paint1_linear-${id})`} />
+                </g>
+                <path
+                    d="M3.1 14.8C3.1 12.5581 3.10008 10.8828 3.20866 9.55376C3.31715 8.22593 3.53345 7.25268 3.96105 6.41348C4.71845 4.92699 5.92699 3.71845 7.41348 2.96105C8.25268 2.53345 9.22593 2.31715 10.5538 2.20866C11.8828 2.10008 13.5581 2.1 15.8 2.1H22.2C24.4419 2.1 26.1172 2.10008 27.4462 2.20866C28.7741 2.31715 29.7473 2.53345 30.5865 2.96105C32.073 3.71845 33.2816 4.92699 34.039 6.41348C34.4665 7.25268 34.6828 8.22593 34.7913 9.55376C34.8999 10.8828 34.9 12.5581 34.9 14.8V21.2C34.9 23.4419 34.8999 25.1172 34.7913 26.4462C34.6828 27.7741 34.4665 28.7473 34.039 29.5865C33.2816 31.073 32.073 32.2816 30.5865 33.039C29.7473 33.4665 28.7741 33.6828 27.4462 33.7913C26.1172 33.8999 24.4419 33.9 22.2 33.9H15.8C13.5581 33.9 11.8828 33.8999 10.5538 33.7913C9.22593 33.6828 8.25268 33.4665 7.41348 33.039C5.92699 32.2816 4.71845 31.073 3.96105 29.5865C3.53345 28.7473 3.31715 27.7741 3.20866 26.4462C3.10008 25.1172 3.1 23.4419 3.1 21.2V14.8Z"
+                    stroke="#0A0D12"
+                    strokeOpacity="0.12"
+                    strokeWidth="0.2"
+                />
+            </g>
+
+            <defs>
+                <filter id={`filter0-${id}`} x="0" y="0" width="38" height="38" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1.5" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
+                    <feBlend mode="normal" in2="effect2_dropShadow" result="effect2_dropShadow" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feMorphology radius="0.5" operator="erode" in="SourceAlpha" result="effect3_dropShadow" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="0.5" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.13 0" />
+                    <feBlend mode="normal" in2="effect2_dropShadow" result="effect3_dropShadow" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow" result="shape" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="-0.5" />
+                    <feGaussianBlur stdDeviation="0.25" />
+                    <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
+                    <feBlend mode="normal" in2="shape" result="effect4_innerShadow" />
+                </filter>
+                <filter id={`filter1_dd-${id}`} x="8" y="8" width="22" height="22" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.06 0" />
+                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                    <feOffset dy="1" />
+                    <feGaussianBlur stdDeviation="1.5" />
+                    <feColorMatrix type="matrix" values="0 0 0 0 0.0392157 0 0 0 0 0.0509804 0 0 0 0 0.0705882 0 0 0 0.1 0" />
+                    <feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape" />
+                </filter>
+                <linearGradient id={`paint0_linear-${id}`} x1="19" y1="2" x2="19" y2="34" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="white" />
+                    <stop offset="1" stopColor="#0A0D12" />
+                </linearGradient>
+                <linearGradient id={`paint1_linear-${id}`} x1="15" y1="26" x2="23" y2="10" gradientUnits="userSpaceOnUse">
+                    <stop stopColor="#66D674" />
+                    <stop offset="1" stopColor="#42D674" />
+                </linearGradient>
+                <clipPath id={`clip0-${id}`}>
+                    <path
+                        d="M3 14.8C3 10.3196 3 8.07937 3.87195 6.36808C4.63893 4.86278 5.86278 3.63893 7.36808 2.87195C9.07937 2 11.3196 2 15.8 2H22.2C26.6804 2 28.9206 2 30.6319 2.87195C32.1372 3.63893 33.3611 4.86278 34.1281 6.36808C35 8.07937 35 10.3196 35 14.8V21.2C35 25.6804 35 27.9206 34.1281 29.6319C33.3611 31.1372 32.1372 32.3611 30.6319 33.1281C28.9206 34 26.6804 34 22.2 34H15.8C11.3196 34 9.07937 34 7.36808 33.1281C5.86278 32.3611 4.63893 31.1372 3.87195 29.6319C3 27.9206 3 25.6804 3 21.2V14.8Z"
+                        fill="white"
+                    />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};

package/src/design_system/logo/keystone-logo.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import { cx } from '../../utils/cx';
+import { KeystoneLogoMinimal } from "./keystone-logo-minimal";
+
+export const KeystoneLogo = (props: HTMLAttributes<HTMLOrSVGElement>) => {
+    return (
+        <div {...props} className={cx("flex h-8 w-max items-center justify-start overflow-visible", props.className)}>
+            {/* Minimal logo */}
+            <KeystoneLogoMinimal className="aspect-square h-full w-auto shrink-0" />
+
+            {/* Gap that adjusts to the height of the container */}
+            <div className="aspect-[0.4] h-full" />
+
+            {/* Clean text logo */}
+            <div className="flex items-center">
+                <span className="text-lg font-semibold text-fg-primary">Keystone</span>
+            </div>
+        </div>
+    );
+};

package/src/design_system/sections/about-home.aman.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { PhotoWithFallback } from '../elements';
+import type { CompanyInformation } from '../../types/api/company-information';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+
+interface AboutHomeProps {
+    config?: any;
+    companyInformation?: CompanyInformation | null;
+    websitePhotos?: WebsitePhotos | null;
+    title?: string;
+    subtitle?: string;
+    ctaText?: string;
+}
+
+export const AboutHome = ({
+    config,
+    companyInformation,
+    websitePhotos,
+    title,
+    subtitle,
+    ctaText,
+}: AboutHomeProps) => {
+    // Get section config
+    const homePageConfig = config?.pages?.find((p: any) => 
+        p.library_reference_name === 'Home' || p.slug === 'home'
+    );
+    const aboutSection = homePageConfig?.sections?.home_page_section_3_about;
+    
+    // Use config values, then props, then defaults
+    const displayTitle = title || aboutSection?.title || '*TR* About Us';
+    const displaySubtitle = subtitle || aboutSection?.subtitle || '*TR* Learn more about our company';
+    const displayCtaText = ctaText || aboutSection?.cta_text || 'Learn more';
+    
+    const description = (companyInformation as any)?.about_text_markdown || aboutSection?.description || '';
+    
+    // Use brand photo for about section, fallback to about photo
+    const aboutImage = (websitePhotos as any)?.brand || websitePhotos?.about;
+
+    return (
+        <section>
+            <div className="mx-auto grid max-w-container grid-cols-1 gap-12 px-4 md:px-8 lg:grid-cols-2 lg:gap-16">
+                <div className="order-2 lg:order-1">
+                    <PhotoWithFallback
+                        photoUrl={aboutImage?.url || ''}
+                        photoAlt={aboutImage?.alt || 'About'}
+                        fallbackId="about-aman"
+                        className="w-full h-full object-cover min-h-[300px] md:min-h-[400px]"
+                    />
+                </div>
+
+                <div className="order-1 lg:order-2 flex flex-col justify-center">
+                    <h2 className="font-display text-4xl font-normal leading-tight text-fg-primary md:text-5xl">
+                        {displayTitle}
+                    </h2>
+                    
+                    {displaySubtitle && (
+                        <p className="mt-4 font-body text-md text-tertiary uppercase tracking-wide">
+                            {displaySubtitle}
+                        </p>
+                    )}
+                    
+                    {description && (
+                        <p className="mt-6 font-body text-lg leading-relaxed text-tertiary">
+                            {description}
+                        </p>
+                    )}
+
+                    {displayCtaText && (
+                        <a
+                            href="/about"
+                            className="mt-8 inline-block font-body text-base underline underline-offset-4 hover:no-underline w-fit transition-colors"
+                            style={{ color: 'var(--color-text-brand-accent)' }}
+                        >
+                            {displayCtaText}
+                        </a>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('about-home', 'aman', AboutHome);