diff --git a/src/components/intro/LandingPageC.tsx b/src/components/intro/LandingPageC.tsx
index 14de66b..49ad4bd 100644
--- a/src/components/intro/LandingPageC.tsx
+++ b/src/components/intro/LandingPageC.tsx
@@ -3,15 +3,12 @@
import { useChat } from '@ai-sdk/react'
import { useGSAP } from '@gsap/react'
import {
- ArrowRight02Icon,
ArtificialIntelligence04Icon,
Copy01Icon,
DashboardSpeed01Icon,
File01Icon,
Idea01Icon,
Link01Icon,
- MaximizeScreenIcon,
- MinimizeScreenIcon,
PlusSignIcon,
Refresh01Icon,
SecurityCheckIcon,
@@ -55,14 +52,14 @@ import {
import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion'
import AnimatedPath from '@/components/intro/AnimatedPath'
import Favicon from '@/components/intro/Favicon'
-import Logo from '@/components/intro/Logo'
+import NavBar from '@/components/layout/NavBar'
import '@/components/leads-page/LeadsPageView.css'
import {
type Citation,
MessageWithCitations,
} from '@/components/leads-page/MessageWithCitations'
+import { ButtonPill } from '@/components/ui/ButtonPill'
import { PrivacyTermsLinks } from '@/components/ui/PrivacyTermsLinks'
-import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import {
@@ -406,15 +403,19 @@ const AssessmentToolInner = ({ chatbotId }: AssessmentToolProps) => {
/>
{/* Modal Card */}
-
-
+ startIconName="minimize-screen"
+ showStartIcon
+ useVariant={false}
+ backgroundColor="transparent"
+ textColor="currentColor"
+ shapeMode="circle"
+ iconSize={20}
+ height={32}
+ />
{chatContent}
,
@@ -427,15 +428,19 @@ const AssessmentToolInner = ({ chatbotId }: AssessmentToolProps) => {
{/* Inline card (when not expanded or intro step) */}
{step === 'chat' && !isExpanded && (
-
-
+ startIconName="maximize-screen"
+ showStartIcon
+ useVariant={false}
+ backgroundColor="transparent"
+ textColor="currentColor"
+ shapeMode="circle"
+ iconSize={20}
+ height={32}
+ />
)}
@@ -508,16 +513,15 @@ const AssessmentToolInner = ({ chatbotId }: AssessmentToolProps) => {
/>
-
- {isSubmitting ? 'Starting...' : 'Start Conversation'}
- {!isSubmitting &&
+ endIconName="arrow-right-02"
+ showEndIcon={!isSubmitting}
+ style={{ width: 'fit-content' }}
+ />
By continuing, you agree to our privacy policy. Your data is secure.
@@ -627,17 +631,26 @@ export function LandingPageC({ chatbotId }: LandingPageCProps) {
return (
+ {/* NavBar */}
+
{/* Hero Section */}
- {/* Logo */}
-
-
-
- Start Assessment
-
+
diff --git a/src/components/layout/NavBar.tsx b/src/components/layout/NavBar.tsx
new file mode 100644
index 0000000..23c48a1
--- /dev/null
+++ b/src/components/layout/NavBar.tsx
@@ -0,0 +1,1821 @@
+'use client'
+
+// NavBar.tsx
+// NavBar variant with internal scroll-based color changing using IntersectionObserver
+
+import * as React from 'react'
+import { motion, useAnimate, useMotionValue, useTransform } from 'motion/react'
+import { usePathname } from 'next/navigation'
+import { HugeiconsIcon, type IconSvgElement } from '@hugeicons/react'
+import * as HugeIconsStroke from '@hugeicons-pro/core-stroke-standard'
+import * as HugeIconsDuotone from '@hugeicons-pro/core-duotone-rounded'
+
+import RMLogoDrawOn from '@/components/ui/RMLogoDrawOn'
+import { ButtonPill } from '@/components/ui/ButtonPill'
+import { CaseStudyCard } from '@/components/ui/case-study-card'
+
+const { useState, useEffect, useRef } = React
+
+// ============================================================================
+// DYNAMIC ICON HELPER
+// ============================================================================
+
+function getIconComponent(
+ iconName: string,
+ variant: 'stroke' | 'duotone' = 'stroke'
+) {
+ const pascalCase = iconName
+ .split('-')
+ .map((part: string) => part.charAt(0).toUpperCase() + part.slice(1))
+ .join('')
+ const iconKey = `${pascalCase}Icon`
+ const iconSet =
+ variant === 'duotone' ? HugeIconsDuotone : HugeIconsStroke
+ return (iconSet as Record
)[iconKey] || null
+}
+
+function DynamicIcon({
+ name,
+ color = 'currentColor',
+ size = 20,
+ variant = 'stroke',
+}: {
+ name: string
+ color?: string
+ size?: number
+ variant?: 'stroke' | 'duotone'
+}) {
+ const IconComponent = getIconComponent(name, variant)
+ if (!IconComponent) return null
+ return (null)
+ const intervalRef = useRef | null>(null)
+
+ useEffect(() => {
+ if (
+ !enabled ||
+ typeof window === "undefined" ||
+ sectionIds.length === 0
+ ) {
+ setIsInLightSection(false)
+ return
+ }
+
+ // Check if nav is currently over any of the specified sections
+ const checkSections = () => {
+ // The nav occupies the area from 0 to navHeight pixels from viewport top
+ const navBottom = navHeight
+
+ for (const sectionId of sectionIds) {
+ // Try standard getElementById first
+ let element = document.getElementById(sectionId)
+
+ // Fallback: try querySelector with data-framer-name or other attributes
+ if (!element) {
+ element = document.querySelector(
+ `[data-framer-name="${sectionId}"]`
+ ) as HTMLElement
+ }
+ if (!element) {
+ element = document.querySelector(
+ `[id*="${sectionId}"]`
+ ) as HTMLElement
+ }
+
+ if (!element) continue
+
+ const rect = element.getBoundingClientRect()
+
+ // Section overlaps nav if: section top is above nav bottom AND section bottom is below viewport top
+ if (rect.top < navBottom && rect.bottom > 0) {
+ setIsInLightSection(true)
+ return
+ }
+ }
+
+ setIsInLightSection(false)
+ }
+
+ // Throttled scroll handler using requestAnimationFrame
+ const handleScroll = () => {
+ if (rafRef.current) return
+ rafRef.current = requestAnimationFrame(() => {
+ checkSections()
+ rafRef.current = null
+ })
+ }
+
+ // Initial check
+ checkSections()
+
+ // In Framer, scroll might be on window OR on a parent container
+ // Listen to both window scroll and use a scroll capture on document
+ window.addEventListener("scroll", handleScroll, { passive: true })
+ document.addEventListener("scroll", handleScroll, {
+ passive: true,
+ capture: true,
+ })
+
+ // Fallback: poll every 250ms for Framer environments where scroll events don't bubble
+ intervalRef.current = setInterval(checkSections, 250)
+
+ return () => {
+ window.removeEventListener("scroll", handleScroll)
+ document.removeEventListener("scroll", handleScroll, {
+ capture: true,
+ })
+ if (rafRef.current) {
+ cancelAnimationFrame(rafRef.current)
+ }
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current)
+ }
+ }
+ }, [sectionIds, navHeight, enabled])
+
+ return isInLightSection
+}
+
+// ============================================================================
+// UTILITIES
+// ============================================================================
+
+
+function normalizePath(href: string) {
+ if (!href || href === "#") return null
+ if (typeof window === "undefined") return href
+ try {
+ const u = new URL(href, window.location.origin)
+ return (u.pathname.replace(/\/+$/, "") || "/") + u.search
+ } catch {
+ return href
+ }
+}
+
+function isCurrentLink(currentPath: string, href: string) {
+ const a = (currentPath || "/").replace(/\/+$/, "") || "/"
+ const b = normalizePath(href)
+ if (!b) return false
+ return a === b
+}
+
+function resolveLink(v: any): string | null {
+ if (!v) return null
+ if (typeof v === "string") return v
+ if (typeof v === "object") {
+ return v.url || v.href || v.pathname || v.path || null
+ }
+ return null
+}
+
+// ============================================================================
+// SUB-COMPONENTS
+// ============================================================================
+
+interface NavLinkItem {
+ id?: string
+ label?: string
+ href?: string
+ icon?: string
+ description?: string
+ projectNumber?: number
+ highlight?: boolean
+}
+
+function LinkList({
+ items = [],
+ title,
+ listId = "list",
+ textColor = "#fff",
+ rowColor,
+ currentPath,
+ onItemClick,
+ highlightColor = "#FCF496",
+ isPhone,
+ showIcons = false,
+ styles,
+}: {
+ items?: NavLinkItem[]
+ title: string
+ listId?: string
+ textColor?: string
+ rowColor: string
+ currentPath: string
+ onItemClick: () => void
+ highlightColor?: string
+ isPhone: boolean
+ showIcons?: boolean
+ styles: Record
+ gridArea?: string
+ [key: string]: any
+}) {
+ const safeItems = Array.isArray(items) ? items : []
+
+ return (
+
+
+ {title}
+
+
+ {safeItems.map((item, i) => {
+ const href = resolveLink(item?.href) || "#"
+ const current = isCurrentLink(currentPath, href)
+ const stableId =
+ typeof item?.id === "string" ? item.id.trim() : ""
+ const key = stableId
+ ? `link:${listId}:${stableId}`
+ : `link:${listId}:${href}:${item?.label ?? ""}:${i}`
+ const projectNumber =
+ typeof item?.projectNumber === "number" &&
+ item.projectNumber > 0
+ ? item.projectNumber
+ : null
+
+ const linkColor = current
+ ? rowColor
+ : item.highlight
+ ? highlightColor
+ : textColor
+
+ return (
+
{
+ // Defer close so the click event bubbles to Framer's
+ // SPA router before DOM mutations from menu close
+ requestAnimationFrame(() => onItemClick?.())
+ }}
+ initial={{ color: linkColor, x: 0 }}
+ animate={{ color: linkColor, x: 0 }}
+ whileHover={{
+ color: rowColor,
+ x: 3,
+ transition: { duration: 0.3 },
+ }}
+ style={{
+ ...styles.navLink,
+ borderBottom: isPhone
+ ? "none"
+ : i !== safeItems.length - 1
+ ? `1px solid color-mix(in srgb, ${textColor} 20%, transparent)`
+ : "none",
+ }}
+ >
+
+ {showIcons && item.icon && (
+
+ )}
+
+
+ {item.label || "Link"}
+
+ {item.description && (
+
+ {item.description}
+
+ )}
+
+
+ {projectNumber !== null && (
+
+ {projectNumber}
+
+ )}
+
+ )
+ })}
+
+ style?: React.CSSProperties
+ [key: string]: any
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
+function CTA({
+ text = "Schedule A Conversation",
+ description = "",
+ icon = "calendar-01",
+ backgroundColor = "#fcf496",
+ borderColor = "#a998c9",
+ textColor = "#04242B",
+ href = "#",
+ isPhone,
+ isTablet,
+ styles,
+ onItemClick,
+ ...props
+}: {
+ text?: string
+ description?: string
+ icon?: string
+ backgroundColor?: string
+ borderColor?: string
+ textColor?: string
+ href?: string
+ isPhone: boolean
+ isTablet: boolean
+ styles: Record
+ onItemClick?: () => void
+ [key: string]: any
+}) {
+ const [isHovered, setIsHovered] = React.useState(false)
+
+ return (
+ {
+ requestAnimationFrame(() => onItemClick?.())
+ }}
+ onMouseEnter={() => setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ whileTap={{ scale: 0.98 }}
+ >
+ {/* Grow overlay — circle clip-path reveal on hover */}
+
+
+
+
+
+
+
+
+ )}
+ {isPhone && (
+
+
+ )}
+ {text}
+ {description && !isPhone && (
+ {description}
+ )}
+ {isPhone && (
+
+
+ )}
+
+ )
+}
+
+function TriggerMenu({ textColor, iconOpen, toggleMenu, styles }: {
+ textColor: string
+ iconOpen: boolean
+ toggleMenu: (source: string) => void
+ styles: Record
+}) {
+ return (
+ {
+ e.preventDefault()
+ e.stopPropagation()
+ toggleMenu("hamburger")
+ }}
+ style={styles.hamburgerButton(textColor)}
+ >
+
+
+
+ )
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
+export default function NavBar(props: Props) {
+ const {
+ homeLink = "https://rolemodelsoftware.com",
+ link1 = "https://rolemodelsoftware.com/services",
+ link2 = "https://rolemodelsoftware.com/portfolio",
+ link3 = "https://rolemodelsoftware.com/consultation",
+ link4 = "https://consult.rolemodelsoftware.com",
+ contactLabel = "Let's Talk",
+ logoTheme = "light",
+ openLogoTheme = "light",
+ bgColor = "var(--blue-green-900)",
+ openBgColor = "var(--blue-green-900)",
+ textColor = "#FFFFFF",
+ openTextColor = "#FFFFFF",
+ accentColor = "#2a84f8",
+ rowColor = "#87D4E9",
+ contactHoverColor = "#2C83F8",
+ ghostColor = "#CCCCCC",
+ border,
+ openBorder,
+ boxShadow,
+ showLinks = true,
+ showIcons = true,
+ showCTA = true,
+ showAi = false,
+ showSpotlight = true,
+ CTABackgroundColor = "#3B70B3",
+ CTABorderColor = "#87D4EA",
+ AiBackgroundColor = "#29464F",
+ AiBorderColor = "#FFFFFF",
+ AiTextColor = "#FFFFFF",
+ AiText = "A.I. Analysis",
+ AiDescription = "Find out if custom software is right for you.",
+ CTAText = "Schedule A Conversation",
+ CTADescription = "",
+ CTATextColor = "#FFFFFF",
+ CTAIcon = "calendar-01",
+ ctaCardHeightTablet = 200,
+ spotlightImageUrl = "https://framerusercontent.com/images/8nGc7fE31a5LiyhesQXL0kAAh48.webp?width=2400&height=1792",
+ logoImage = "https://framerusercontent.com/images/fq0QpZJihXpp1TCLYctWjKapX8.svg?width=189&height=88",
+ spotlightContent = "Branded Mobile PWA and Desktop Web application for business forum and executive coaching firm",
+ spotlightLink ="https://rolemodelsoftware.com/case-studies/c12-business-forums",
+ highlightColor = "#2A83F7",
+ gap = 32,
+ outterPadding = 0,
+ col1Title = "About Us",
+ col2Title = "Our Approach",
+ col3Title = "People",
+ col4Title = "Solutions",
+ col1Links = [
+ { id: "services", label: "Services", href: "https://rolemodelsoftware.com/services", description: "We craft custom software tailored to your business", icon: "wrench-01" },
+ { id: "about", label: "About", href: "https://rolemodelsoftware.com/about", description: "We're a world class software development team", icon: "target-01" },
+ { id: "work", label: "Our Work", href: "https://rolemodelsoftware.com/portfolio", description: "Case studies and results from our work.", icon: "briefcase-01" },
+ { id: "way", label: "The RoleModel Way", href: "https://rolemodelsoftware.com/rolemodel-way", description: "The principles and practices of how we work", icon: "puzzle" },
+ ],
+ col2Links = [
+ { id: "approach", label: "Our Approach", href: "https://rolemodelsoftware.com/focuses/expertise-amplification", description: "Our unique process that ensures project success.", icon: "car-01" },
+ { id: "expertise", label: "Expertise Amplification", href: "https://rolemodelsoftware.com/focuses/expertise-amplification", description: "Your domain expertise + our software craft.", icon: "brain-01" },
+ { id: "iterative", label: "Iterative Value", href: "https://rolemodelsoftware.com/focuses/iterative-value", description: "Ship value fast, then build on a solid foundation.", icon: "reload" },
+ { id: "process", label: "Process Scaling", href: "https://rolemodelsoftware.com/focuses/process-scaling", description: "Process first, software second\u2014scale your advantage.", icon: "arrow-up-right-02" },
+ ],
+ col3Links = [
+ { id: "careers", label: "Careers", href: "https://rolemodelsoftware.com/careers", description: "We're always looking for talent.", icon: "laptop-programming" },
+ { id: "academy", label: "Craftsmanship Academy", href: "https://rolemodelsoftware.com/academy", description: "Building future leaders in software development.", icon: "mortarboard-01" },
+ ],
+ col4Links = [
+ { id: "optics", label: "Optics", href: "https://rolemodelsoftware.com/optics", description: "Our design system for consistent, scalable UI.", icon: "circle" },
+ { id: "lightning", label: "LightningCAD", href: "https://rolemodelsoftware.com/lightningcad", description: "Rules-driven design tools.", icon: "zap" },
+ ],
+ previewOpen,
+ previewMode = "auto",
+ // Scroll-based color change props
+ enableScrollColorChange = false,
+ colorChangeSections = [],
+ altBgColor = "#FFFFFF",
+ altTextColor = "#000000",
+ altLogoTheme = "dark",
+ altAccentColor = "#2a84f8",
+ altBorder,
+ navHeight = 80,
+ menuPaddingInline: menuPaddingInlineProp = 40,
+ menuPaddingBlock: menuPaddingBlockProp = 0,
+ } = props
+
+ const isCanvas = false
+ const [isLogoHovered, setIsLogoHovered] = React.useState(false)
+ const [isSpotlightHovered, setIsSpotlightHovered] = React.useState(false)
+
+ // Parse section IDs from string or array
+ const sectionIdList = React.useMemo(() => {
+ if (!colorChangeSections) return []
+ if (Array.isArray(colorChangeSections)) {
+ return colorChangeSections.filter(Boolean)
+ }
+ // Support comma-separated string
+ if (typeof colorChangeSections === "string") {
+ return colorChangeSections
+ .split(",")
+ .map((s) => s.trim())
+ .filter(Boolean)
+ }
+ return []
+ }, [colorChangeSections])
+
+ // Use scroll color change hook
+ const isInAltSection = useScrollColorChange(
+ sectionIdList,
+ navHeight,
+ enableScrollColorChange && !isCanvas
+ )
+
+ // Breakpoint detection - direct width check (most reliable)
+ const MOBILE_MAX = 760
+ const TABLET_MAX = 1324
+
+ // Always initialize with server-safe defaults to prevent hydration mismatch.
+ // The useEffect below will immediately update to the real values on the client.
+ const [breakpointState, setBreakpointState] = React.useState({
+ isMobile: false,
+ isTablet: false,
+ })
+
+ React.useEffect(() => {
+ if (typeof window === "undefined") return
+
+ const updateBreakpoints = () => {
+ const w = window.innerWidth
+ const newMobile = w <= MOBILE_MAX
+ const newTablet = w > MOBILE_MAX && w <= TABLET_MAX
+
+ setBreakpointState((prev) => {
+ if (
+ prev.isMobile !== newMobile ||
+ prev.isTablet !== newTablet
+ ) {
+ return { isMobile: newMobile, isTablet: newTablet }
+ }
+ return prev
+ })
+ }
+
+ // Check immediately
+ updateBreakpoints()
+
+ // Listen to resize
+ window.addEventListener("resize", updateBreakpoints)
+
+ return () => {
+ window.removeEventListener("resize", updateBreakpoints)
+ }
+ }, [])
+
+ const { isMobile: isMobileViewport, isTablet: isTabletViewport } =
+ breakpointState
+
+ const isPhone = React.useMemo(() => {
+ if (previewMode === "mobile") return true
+ if (previewMode === "tablet") return false
+ if (previewMode === "desktop") return false
+ return isMobileViewport
+ }, [previewMode, isMobileViewport])
+
+ const isTablet = React.useMemo(() => {
+ if (previewMode === "tablet") return true
+ if (previewMode === "mobile") return false
+ if (previewMode === "desktop") return false
+ return isTabletViewport
+ }, [previewMode, isTabletViewport])
+
+ const [isOpen, setIsOpen] = useState(previewOpen || false)
+ const [iconOpen, setIconOpen] = useState(previewOpen || false)
+ const [activeMenuButton, setActiveMenuButton] = useState(
+ null
+ )
+ const [isClickLocked, setIsClickLocked] = useState(false)
+ const [suppressHover, setSuppressHover] = useState(false)
+ const hoverTimeoutRef = useRef | null>(null)
+ const openedViaClickAtRef = useRef(null)
+
+ // Determine current colors based on scroll position and open state
+ const currentBgColor = isOpen
+ ? openBgColor
+ : isInAltSection
+ ? altBgColor
+ : bgColor
+
+ const currentTextColor = isOpen
+ ? openTextColor
+ : isInAltSection
+ ? altTextColor
+ : textColor
+
+ const currentLogoTheme = isOpen
+ ? openLogoTheme
+ : isInAltSection
+ ? altLogoTheme
+ : logoTheme
+
+ const currentAccentColor = isInAltSection ? altAccentColor : accentColor
+
+ const currentBorder = isOpen
+ ? openBorder
+ : isInAltSection && altBorder
+ ? altBorder
+ : border
+
+ const finalTextColor = currentTextColor
+ const finalLogoTheme = currentLogoTheme
+
+ const pathname = usePathname()
+ const currentPath = pathname || "/"
+
+ // Menu padding from props (with mobile cap)
+ const menuPaddingInline = isPhone
+ ? Math.min(menuPaddingInlineProp, 24)
+ : menuPaddingInlineProp
+ const menuPaddingBlock = isPhone ? 0 : menuPaddingBlockProp
+
+ // Generate styles
+ const styles = React.useMemo(
+ () =>
+ createStyles({
+ isPhone,
+ isTablet,
+ isOpen,
+ textColor: currentTextColor,
+ rowColor,
+ CTABackgroundColor,
+ AiBackgroundColor,
+ finalTextColor,
+ gap,
+ outterPadding,
+ border,
+ openBorder,
+ menuPaddingInline,
+ menuPaddingBlock,
+ ctaCardHeightTablet,
+ }),
+ [
+ isPhone,
+ isTablet,
+ isOpen,
+ currentTextColor,
+ rowColor,
+ CTABackgroundColor,
+ AiBackgroundColor,
+ finalTextColor,
+ gap,
+ outterPadding,
+ border,
+ openBorder,
+ menuPaddingInline,
+ menuPaddingBlock,
+ ctaCardHeightTablet,
+ ]
+ )
+
+ const gridTemplateColumns = React.useMemo(() => {
+ if (isPhone) return "1fr"
+ // tablet + desktop: 6 equal columns
+ return "repeat(6, 1fr)"
+ }, [isPhone])
+
+ // Grid template areas based on showCTA, showAi, showSpotlight
+ const gridTemplateAreas = React.useMemo(() => {
+ // PHONE – single column stack
+ if (isPhone) {
+ const rows: string[] = ['"c1"', '"c2"', '"c3"']
+ if (showCTA) rows.push('"c5"')
+ if (showAi) rows.push('"c6"')
+ return rows.join("\n")
+ }
+
+ // TABLET + DESKTOP (6 columns layout)
+ const topRow = `"c1 c1 c2 c2 c3 c3"`
+
+ // Collect bottom-row items
+ const bottomItems: string[] = []
+ if (showSpotlight) bottomItems.push("c4")
+ if (showCTA) bottomItems.push("c5")
+ if (showAi) bottomItems.push("c6")
+
+ // No bottom items – top row only
+ if (bottomItems.length === 0) {
+ return topRow
+ }
+
+ // 1 item – full width bottom row
+ if (bottomItems.length === 1) {
+ const item = bottomItems[0]
+ return `${topRow}
+ "${item} ${item} ${item} ${item} ${item} ${item}"`
+ }
+
+ // 2 items – each spans 3 cols
+ if (bottomItems.length === 2) {
+ const [a, b] = bottomItems
+ return `${topRow}
+ "${a} ${a} ${a} ${b} ${b} ${b}"`
+ }
+
+ // 3 items – each spans 2 cols
+ const [a, b, c] = bottomItems
+ return `${topRow}
+ "${a} ${a} ${b} ${b} ${c} ${c}"`
+ }, [isPhone, showCTA, showAi, showSpotlight])
+
+ // Animations
+ const [scope, animate] = useAnimate()
+
+ // 0 = closed, 1 = open
+ const menuProgress = useMotionValue(isOpen ? 1 : 0)
+
+ // Translate progress (0–1) into a maxHeight for the inner menu
+ // Adjust 500 to the approximate max dropdown height you need
+ const menuMaxHeight = useTransform(menuProgress, (p) => `${p * 1500}px`)
+
+ // Ensure MV stays in sync with state (e.g. after navigation)
+ useEffect(() => {
+ menuProgress.set(isOpen ? 1 : 0)
+ }, [isOpen, menuProgress])
+
+ const easing: [number, number, number, number] = [0.76, 0, 0.24, 1]
+
+ // Instant close for link clicks (no animation, navigation wins)
+ const instantCloseMenu = () => {
+ const root = scope.current
+ if (root) {
+ const shell = root.querySelector(".shell") as HTMLElement | null
+ if (shell) {
+ shell.style.gap = "0px"
+ }
+ }
+ setIconOpen(false)
+ setActiveMenuButton(null)
+ setIsClickLocked(false)
+ setIsOpen(false)
+ menuProgress.set(0)
+ }
+
+ const openMenu = async (buttonId?: string) => {
+ const root = scope.current
+ if (!root) return
+
+ const shell = root.querySelector(".shell") as HTMLElement | null
+
+ setIsOpen(true)
+ setIconOpen(true)
+ if (buttonId) setActiveMenuButton(buttonId)
+
+ const openGap = isTablet ? 24 : isPhone ? 16 : gap
+ const duration = 0.3
+
+ if (shell) {
+ animate(shell, { gap: `${openGap}px` } as any, { duration, ease: easing as any })
+ }
+
+ // expand dropdown
+ await animate(menuProgress as any, 1, { duration, ease: easing as any })
+ }
+
+ const closeMenu = async () => {
+ if (!isOpen) return
+
+ const root = scope.current
+ if (!root) {
+ setIconOpen(false)
+ setIsOpen(false)
+ setActiveMenuButton(null)
+ setIsClickLocked(false)
+ menuProgress.set(0)
+ return
+ }
+
+ const shell = root.querySelector(".shell") as HTMLElement | null
+
+ setIconOpen(false)
+ setActiveMenuButton(null)
+ setIsClickLocked(false)
+
+ const duration = 0.25
+
+ if (shell) {
+ animate(shell, { gap: "0px" } as any, { duration, ease: easing as any })
+ }
+
+ // collapse dropdown
+ await animate(menuProgress as any, 0, { duration, ease: easing as any })
+
+ setIsOpen(false)
+
+ if (shell) {
+ shell.style.gap = ""
+ }
+ }
+
+ useEffect(() => {
+ if (isCanvas && previewOpen) {
+ const openGap = isTablet ? 20 : isPhone ? 0 : gap
+ const root = scope.current
+ if (root) {
+ const shell = root.querySelector(".shell") as HTMLElement | null
+ if (shell) {
+ shell.style.gap = `${openGap}px`
+ }
+ }
+ menuProgress.set(1)
+ setIsOpen(true)
+ setIconOpen(true)
+ }
+ }, [isCanvas, previewOpen, isPhone, isTablet, gap, menuProgress])
+
+ // Keep shell gap in sync with open state
+ React.useEffect(() => {
+ if (!isOpen) {
+ const root = scope.current
+ if (root) {
+ const shell = root.querySelector(".shell") as HTMLElement | null
+ if (shell) {
+ shell.style.gap = "0px"
+ }
+ }
+ }
+ }, [isOpen, scope])
+
+ React.useEffect(() => {
+ // Save original overflow style on mount
+ const originalStyle = window.getComputedStyle(document.body).overflow
+
+ if (isOpen) {
+ document.body.style.overflow = "hidden"
+ } else {
+ document.body.style.overflow = originalStyle
+ }
+
+ // Cleanup: restore original style on unmount or when isOpen changes
+ return () => {
+ document.body.style.overflow = originalStyle
+ }
+ }, [isOpen]) // Include isOpen in dependency array
+
+ const toggleMenu = (buttonId?: string) => {
+ if (isOpen && activeMenuButton === buttonId) {
+ // Clicking the same button again closes and unlocks
+ setIsClickLocked(false)
+ closeMenu()
+ } else if (isOpen && buttonId) {
+ // Switching to a different button, lock it
+ setActiveMenuButton(buttonId)
+ setIsClickLocked(true)
+ } else {
+ // Opening via click - lock it open
+ setIsClickLocked(true)
+ openedViaClickAtRef.current = Date.now()
+ openMenu(buttonId)
+ }
+ }
+
+ // Desktop hover handlers
+ const handleMenuButtonHover = (buttonId: string) => {
+ if (isPhone || isCanvas || isClickLocked) return
+ if (hoverTimeoutRef.current) {
+ clearTimeout(hoverTimeoutRef.current)
+ hoverTimeoutRef.current = null
+ }
+ if (!isOpen) {
+ openMenu(buttonId)
+ }
+ }
+
+ const handleShellMouseEnter = () => {
+ if (isPhone || isCanvas || isClickLocked) return
+ if (hoverTimeoutRef.current) {
+ clearTimeout(hoverTimeoutRef.current)
+ hoverTimeoutRef.current = null
+ }
+ }
+
+ const handleShellMouseLeave = () => {
+ if (isPhone || isCanvas || !isOpen || isClickLocked) return
+ // Simple delayed close - gives time to reach dropdown
+ hoverTimeoutRef.current = setTimeout(() => {
+ setSuppressHover(true)
+ closeMenu()
+ }, 300)
+ }
+
+ // Cleanup on unmount
+ React.useEffect(() => {
+ return () => {
+ if (hoverTimeoutRef.current) {
+ clearTimeout(hoverTimeoutRef.current)
+ }
+ }
+ }, [])
+
+ // Event listeners
+ React.useEffect(() => {
+ if (!isOpen || isCanvas) return
+
+ const handleEscape = (e: KeyboardEvent) => {
+ if (e.key === "Escape") closeMenu()
+ }
+ const handleClickOutside = (e: MouseEvent) => {
+ // Ignore delayed synthetic click from mobile tap (fires ~300ms later with stale target)
+ const openedAt = openedViaClickAtRef.current
+ if (openedAt && Date.now() - openedAt < 400) {
+ openedViaClickAtRef.current = null
+ return
+ }
+
+ const shell = scope.current?.querySelector(".shell")
+ if (shell && !shell.contains(e.target as Node)) closeMenu()
+ }
+
+ document.addEventListener("keydown", handleEscape)
+ const clickTimer = setTimeout(() => {
+ document.addEventListener("click", handleClickOutside)
+ }, 100)
+
+ return () => {
+ clearTimeout(clickTimer)
+ document.removeEventListener("keydown", handleEscape)
+ document.removeEventListener("click", handleClickOutside)
+ }
+ }, [isOpen, isCanvas])
+
+ // ============================================================================
+ // RENDER
+ // ============================================================================
+
+ return (
+
+
+
+
+ {/* Header */}
+
+ setIsLogoHovered(true)}
+ onMouseLeave={() => setIsLogoHovered(false)}
+ >
+
+
+ {!isPhone && showLinks && (
+ <>
+
+
+
{
+ if (!isClickLocked)
+ handleMenuButtonHover("company")
+ }}
+ onMouseLeave={() => {
+ if (!isClickLocked)
+ setSuppressHover(false)
+ }}
+ style={{ display: "inline-flex" }}
+ >
+ {
+ e.preventDefault()
+ e.stopPropagation()
+ toggleMenu("company")
+ }}
+ showEndIcon
+ endIconName="arrow-down-01"
+ isActive={
+ activeMenuButton === "company"
+ }
+ label="Company & Approach"
+ disableHoverAnimation={true}
+ />
+
+
+
+
+
+ {/* Menu Dropdown */}
+
+
+
+
+
+
+
+
+
+
+ {!isPhone && showSpotlight && (
+
+
+ Partner Spotlight
+
+
+
+
+
+ )[iconKey] || null
+}
+
+export type ButtonPillVariant =
+ | 'dark'
+ | 'light'
+ | 'blue'
+ | 'darkblue'
+ | 'rmbrightblue'
+ | 'brightblue'
+ | 'green'
+ | 'secondary'
+ | 'purple'
+ | 'lightpurple'
+ | 'bluegreen'
+ | 'yellow'
+ | 'ghost'
+ | 'default'
+
+export interface ButtonPillProps {
+ ariaLabel?: string
+ label?: string
+
+ // Color / variant
+ useVariant?: boolean
+ circle?: boolean
+ grow?: boolean
+ variant?: ButtonPillVariant
+ backgroundColor?: string
+ hoverBackground?: boolean
+ hoverbackgroundColor?: string
+ hoverColor?: string
+ boxShadow?: string
+ textColor?: string
+ hoverTextColor?: string
+
+ // Layout / font
+ iconStyle?: string
+ borderRadius?: number
+ paddingX?: number
+ font?: CSSProperties
+
+ // State
+ isActive?: boolean
+ disableHoverAnimation?: boolean
+
+ // Icons
+ showStartIcon?: boolean
+ showEndIcon?: boolean
+ startIconName?: string
+ endIconName?: string
+ startIconSvg?: string
+ endIconSvg?: string
+ iconGap?: number
+ iconSize?: number
+ circleSize?: number
+ iconFontWeight?: number
+ iconVariant?: 'stroke' | 'solid' | 'duotone'
+
+ // Shape / behavior
+ shapeMode?: 'auto' | 'circle'
+ disableGrowOverlay?: boolean
+ height?: number
+
+ // Misc
+ style?: CSSProperties
+ className?: string
+ href?: string
+ target?: string
+ rel?: string
+ onClick?: (e: React.MouseEvent) => void
+ onTap?: () => void
+ onMouseEnter?: () => void
+ onMouseLeave?: () => void
+ children?: ReactNode
+ type?: 'button' | 'submit' | 'reset'
+ disabled?: boolean
+}
+
+type VariantColors = {
+ bg: string
+ textColor: string
+ hoverTextColor: string
+ boxShadow?: string
+ hoverBoxShadow?: string
+ hoverbackgroundColor?: string
+}
+
+export function ButtonPill(props: ButtonPillProps) {
+ const {
+ ariaLabel = 'Button',
+ label = 'Button',
+
+ useVariant = true,
+ variant = 'blue',
+ backgroundColor,
+ textColor,
+ hoverTextColor,
+ circleSize = 50,
+ borderRadius = 8,
+ boxShadow,
+ paddingX = 20,
+ font,
+ circle,
+ hoverbackgroundColor,
+ disableHoverAnimation = false,
+
+ startIconName = '',
+ endIconName = '',
+ showStartIcon = false,
+ showEndIcon = false,
+ startIconSvg = '',
+ endIconSvg = '',
+ iconGap = 8,
+ iconSize = 18,
+ iconFontWeight = 500,
+ iconVariant = 'stroke',
+ style,
+ className,
+ isActive = false,
+ href,
+ target,
+ rel,
+ onClick,
+ onTap,
+ onMouseEnter: onMouseEnterProp,
+ onMouseLeave: onMouseLeaveProp,
+ shapeMode = 'auto',
+ disableGrowOverlay = false,
+ height,
+ children,
+ type = 'button',
+ disabled = false,
+ } = props
+
+ // Single source of truth for modes
+ const isCircleMode = shapeMode === 'circle' || (shapeMode === 'auto' && Boolean(circle))
+
+ // Ensure icons render only after hydration to avoid mismatch
+ const [isMounted, setIsMounted] = useState(false)
+ useEffect(() => { setIsMounted(true) }, [])
+
+ // Hover state for grow overlay
+ const [isHovered, setIsHovered] = useState(false)
+
+ const handleMouseEnter = () => {
+ if (isActive || disableHoverAnimation) return
+ setIsHovered(true)
+ onMouseEnterProp?.()
+ }
+
+ const handleMouseLeave = () => {
+ setIsHovered(false)
+ onMouseLeaveProp?.()
+ }
+
+ // =====================
+ // Variant color tokens
+ // =====================
+
+ const variants: Record = {
+ default: {
+ bg: 'transparent',
+ textColor: '#000000',
+ hoverTextColor: '#000000',
+ },
+ secondary: {
+ bg: '#FFFFFF',
+ textColor: '#181A18',
+ hoverTextColor: '#2A84F8',
+ boxShadow: '0 0 0 1px #CCCCCC inset',
+ hoverBoxShadow: '0 0 0 1px #CCCCCC inset',
+ },
+ dark: {
+ bg: '#04242B',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ hoverbackgroundColor: '#000000',
+ },
+ light: {
+ bg: '#FFFFFF',
+ textColor: '#181A18',
+ hoverTextColor: '#181A18',
+ },
+ blue: {
+ bg: '#3A70B3',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ },
+ darkblue: {
+ bg: '#193C64',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ },
+ rmbrightblue: {
+ bg: '#2A84F8',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ },
+ brightblue: {
+ bg: '#87D4E9',
+ textColor: '#000000',
+ hoverTextColor: '#000000',
+ },
+ green: {
+ bg: '#538C5E',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ },
+ purple: {
+ bg: '#3C194A',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ },
+ lightpurple: {
+ bg: '#A998C9',
+ textColor: '#181A18',
+ hoverTextColor: '#181A18',
+ },
+ bluegreen: {
+ bg: '#27434D',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ },
+ yellow: {
+ bg: '#FCF496',
+ textColor: '#181A18',
+ hoverTextColor: '#181A18',
+ },
+ ghost: {
+ bg: 'transparent',
+ textColor: '#FFFFFF',
+ hoverTextColor: '#FFFFFF',
+ boxShadow: '0 0 0 1px #FFFFFF inset',
+ },
+ }
+
+ const variantColors = variants[variant] ?? variants.default
+
+ const colors: VariantColors = useVariant
+ ? {
+ ...variantColors,
+ textColor: textColor && textColor !== '' ? textColor : variantColors.textColor,
+ hoverTextColor:
+ hoverTextColor && hoverTextColor !== ''
+ ? hoverTextColor
+ : variantColors.hoverTextColor,
+ hoverbackgroundColor:
+ hoverbackgroundColor && hoverbackgroundColor !== ''
+ ? hoverbackgroundColor
+ : variantColors.hoverbackgroundColor,
+ }
+ : {
+ bg: backgroundColor || 'transparent',
+ textColor: textColor || '#000000',
+ hoverTextColor: hoverTextColor || '#000000',
+ hoverbackgroundColor: hoverbackgroundColor || backgroundColor || 'transparent',
+ }
+
+ // Grow overlay: only when there's a solid background
+ const growBgColor = colors.hoverbackgroundColor || colors.bg
+ const hasGrowBg = Boolean(growBgColor && growBgColor !== 'transparent')
+
+ // =====================
+ // Shadows
+ // =====================
+
+ const styleBoxShadow = style?.boxShadow as string | undefined
+
+ const isValidShadow = (shadow: string | undefined): shadow is string =>
+ Boolean(shadow && shadow !== 'none' && shadow.trim() !== '')
+
+ const computedShadow = isValidShadow(styleBoxShadow)
+ ? styleBoxShadow
+ : isValidShadow(boxShadow)
+ ? boxShadow
+ : useVariant
+ ? variants[variant]?.boxShadow || undefined
+ : undefined
+
+ const computedHoverShadow = isValidShadow(styleBoxShadow)
+ ? styleBoxShadow
+ : useVariant && variants[variant]?.hoverBoxShadow
+ ? variants[variant].hoverBoxShadow
+ : computedShadow
+
+ // =====================
+ // Motion variants
+ // =====================
+
+ const hasShadow = isValidShadow(computedShadow)
+ const hasHoverShadow = isValidShadow(computedHoverShadow)
+
+ const buttonVariants = {
+ initial: {
+ color: colors.textColor,
+ ...(hasShadow && { boxShadow: computedShadow }),
+ },
+ rest: {
+ color: colors.textColor,
+ ...(hasShadow && { boxShadow: computedShadow }),
+ filter: 'brightness(100%) saturate(100%)',
+ transition: { duration: 0.35, ease: 'easeInOut' as const },
+ },
+ hover: {
+ color: colors.hoverTextColor,
+ ...(hasHoverShadow && { boxShadow: computedHoverShadow }),
+ filter:
+ !disableGrowOverlay && hasGrowBg
+ ? 'brightness(100%) saturate(100%)'
+ : 'brightness(110%) saturate(134%)',
+ transition: { duration: 0.25, ease: 'easeInOut' as const },
+ },
+ tap: { scale: 0.95, transition: { duration: 0.5, ease: 'easeOut' as const } },
+ active: {
+ color: colors.textColor,
+ ...(hasShadow && { boxShadow: computedShadow }),
+ filter: 'brightness(110%) saturate(120%)',
+ transition: { duration: 0.25, ease: 'easeInOut' as const },
+ },
+ }
+
+ // =====================
+ // Helpers
+ // =====================
+
+ const computedLineHeight =
+ typeof font?.lineHeight === 'number'
+ ? `${font.lineHeight}px`
+ : font?.lineHeight || '1.3em'
+
+ const renderSvg = (raw: string) => {
+ if (!raw) return null
+
+ const sanitizeSvg = (svg: string): string => {
+ // Strip script tags and event handlers for XSS protection
+ let cleaned = svg
+ .replace(//gi, '')
+ .replace(/]*\/>/gi, '')
+ .replace(/\bon\w+\s*=\s*["'][^"']*["']/gi, '')
+ .replace(/\bon\w+\s*=\s*\S+/gi, '')
+ .replace(/javascript\s*:/gi, '')
+ .replace(/data\s*:/gi, 'data-blocked:')
+ .replace(//gi, '')
+ .replace(/]*\/>/gi, '')
+ .replace(//gi, '')
+ .replace(/]*\/?>/gi, '')
+ .replace(//gi, '')
+
+ // Replace fill/stroke colors with currentColor
+ cleaned = cleaned
+ .replace(/fill="(?!none)[^"]*"/gi, 'fill="currentColor"')
+ .replace(/stroke="(?!none)[^"]*"/gi, 'stroke="currentColor"')
+ .replace(/fill='(?!none)[^']*'/gi, "fill='currentColor'")
+ .replace(/stroke='(?!none)[^']*'/gi, "stroke='currentColor'")
+
+ return cleaned
+ }
+
+ const cleaned = sanitizeSvg(raw)
+ return (
+ 500 ? 2 : 1}
+ />
+ )
+ }
+
+ const displayLabel = label || 'Button'
+
+ // =====================
+ // Content blocks
+ // =====================
+
+ const content: ReactNode = (
+
+ {isMounted && showStartIcon && (startIconName || startIconSvg) && (
+
+ {startIconName ? renderIcon(startIconName) : renderSvg(startIconSvg)}
+
+ )}
+
+
+ {displayLabel}
+
+
+ {isMounted && showEndIcon && (endIconName || endIconSvg) && (
+
+ {endIconName ? renderIcon(endIconName) : renderSvg(endIconSvg)}
+
+ )}
+
+ {startIconName
+ ? renderIcon(startIconName)
+ : startIconSvg
+ ? renderSvg(startIconSvg)
+ : endIconName
+ ? renderIcon(endIconName)
+ : endIconSvg
+ ? renderSvg(endIconSvg)
+ : null}
+
+ )
+
+ // Choose inner content - children override default content
+ const hasChildren =
+ children !== null &&
+ children !== undefined &&
+ !(Array.isArray(children) && children.length === 0)
+
+ const innerContent: ReactNode = hasChildren
+ ? children
+ : isCircleMode
+ ? circleContent
+ : content
+
+ // Only show overlay when there's an actual solid background color
+ const useGrowOverlay = !disableGrowOverlay && hasGrowBg && !disableHoverAnimation
+
+ const renderGrowOverlay = () => (
+
+ {innerContent}
+
+ )
+
+ // =====================
+ // Wrapper styles + render
+ // =====================
+
+ const { boxShadow: _styleBoxShadow, ...restStyle } = style || {}
+
+ const sharedStyles: CSSProperties = {
+ borderRadius: isCircleMode ? '50%' : borderRadius,
+ backgroundColor: colors.bg,
+ color: colors.textColor,
+ position: 'relative',
+ overflow: 'hidden',
+ paddingInline: isCircleMode ? 0 : paddingX,
+ border: 'none',
+ cursor: disabled ? 'not-allowed' : 'pointer',
+ display: 'inline-flex',
+ alignItems: 'center',
+ width: isCircleMode ? (height ?? circleSize) : undefined,
+ height: isCircleMode ? (height ?? circleSize) : (height ?? 40),
+ justifyContent: 'center',
+ alignSelf: 'flex-start',
+ willChange: 'border-radius, filter',
+ fontFamily: 'var(--font-family-sans, "DM Sans", sans-serif)',
+ textDecoration: 'none',
+ fontSize: 16,
+ fontWeight: 500,
+ lineHeight: 1.3,
+ aspectRatio: isCircleMode ? '1 / 1' : undefined,
+ opacity: disabled ? 0.6 : 1,
+ ...restStyle,
+ ...(hasShadow && { boxShadow: computedShadow }),
+ }
+
+ const currentAnimate = isActive
+ ? buttonVariants.active
+ : isHovered && !disableHoverAnimation
+ ? buttonVariants.hover
+ : buttonVariants.rest
+
+ const sharedMotionProps = {
+ initial: buttonVariants.initial,
+ animate: currentAnimate as any,
+ whileHover: !isActive && !disableHoverAnimation ? buttonVariants.hover as any : undefined,
+ whileTap: !disabled ? buttonVariants.tap : undefined,
+ style: sharedStyles,
+ className,
+ onClick: onClick || onTap,
+ onMouseEnter: handleMouseEnter,
+ onMouseLeave: handleMouseLeave,
+ }
+
+ // Resolve href
+ const resolvedHref =
+ typeof href === 'string'
+ ? href
+ : href && typeof href === 'object'
+ ? (href as { url?: string; href?: string; pathname?: string; path?: string }).url ||
+ (href as { url?: string; href?: string; pathname?: string; path?: string }).href ||
+ (href as { url?: string; href?: string; pathname?: string; path?: string })
+ .pathname ||
+ (href as { url?: string; href?: string; pathname?: string; path?: string }).path ||
+ null
+ : null
+
+ if (resolvedHref) {
+ return (
+
+ {useGrowOverlay && renderGrowOverlay()}
+ {wrappedInner}
+
+ )
+ }
+
+ return (
+
+ {useGrowOverlay && renderGrowOverlay()}
+ {wrappedInner}
+
+ )
+}
+
+export default ButtonPill
diff --git a/src/components/ui/RMLogoDrawOn.tsx b/src/components/ui/RMLogoDrawOn.tsx
new file mode 100644
index 0000000..7b66084
--- /dev/null
+++ b/src/components/ui/RMLogoDrawOn.tsx
@@ -0,0 +1,567 @@
+'use client'
+
+import * as React from 'react'
+
+type Trigger = 'load' | 'in-view'
+type DrawOrder = 'dom' | 'top-down'
+type Theme = 'default' | 'light' | 'dark' | 'blue-white'
+
+interface Props {
+ trigger?: Trigger
+ duration?: number
+ stagger?: number
+ initialDelay?: number
+ easing?: string
+ fadeIn?: boolean
+ fadeDuration?: number
+ replay?: boolean
+ replayDelay?: number
+ drawOrder?: DrawOrder
+ ghost?: boolean
+ ghostColor?: string
+ ghostOpacity?: number
+ ghostGap?: number
+ autoPlay?: boolean
+ overlap?: number
+ theme?: Theme
+ hoverTheme?: Theme
+ isHovered?: boolean
+ textColor?: string
+ width?: string | number
+ height?: string | number
+ oncePerSession?: boolean
+ sessionKey?: string
+ style?: React.CSSProperties
+ className?: string
+}
+
+const GLYPH_ORDER = [
+ 'R', 'o', 'l', 'e2', 'm', 'o3', 'd', 'e', 'l3',
+ 's', 'o6', 'f', 't', 'w', 'a', 'r', 'e4',
+]
+
+const STROKE_ORDER: Record = {
+ R: ['!R-line', '!R-body'],
+ o: ['o-circle'],
+ l: ['!l-stem'],
+ e2: ['e2-stroke'],
+ m: ['m-stroke'],
+ o3: ['o3-circle'],
+ d: ['!d-stem', 'd-bowl'],
+ e: ['e-stroke'],
+ l3: ['!l3-stem'],
+ s: ['!s-curve'],
+ o6: ['o6-circle'],
+ f: ['!f-stem', '!f-cross'],
+ t: ['!t-stem', '!t-cross'],
+ w: ['!w-stroke'],
+ a: ['!a-stem', '!a-bowl'],
+ r: ['!r-stem', '!r-arm'],
+ e4: ['e4-stroke'],
+}
+
+const SVG_MARKUP = String.raw`
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+
+const STATIC_SVG_MARKUP = String.raw`
+ `
+
+const createTransitionableSVG = (): string => {
+ let svg = SVG_MARKUP
+ svg = svg.replace(/#181A18/gi, 'var(--logo-text-color)')
+ svg = svg.replace(/#2a84f8/gi, 'var(--logo-rolemodel-color)')
+ svg = svg.replace(/stroke="var/g, 'style="transition: stroke 0.3s ease-out;" stroke="var')
+ return svg
+}
+
+const TRANSITIONABLE_SVG = createTransitionableSVG()
+
+const getThemeColors = (
+ theme: Theme,
+ textColor?: string
+): { roleModelColor: string; textColorValue: string } => {
+ let roleModelColor = '#2a84f8'
+ let textColorValue = textColor || '#181A18'
+
+ if (theme === 'light') {
+ roleModelColor = '#FFFFFF'
+ if (!textColor) textColorValue = '#FFFFFF'
+ } else if (theme === 'dark') {
+ roleModelColor = textColorValue
+ }
+
+ return { roleModelColor, textColorValue }
+}
+
+const getThemedStaticSVG = (theme: Theme, textColor?: string): string => {
+ let svg = STATIC_SVG_MARKUP
+
+ if (theme === 'light') {
+ svg = svg.replace(/#2a84f8/gi, '#FFFFFF')
+ if (!textColor) svg = svg.replace(/#181A18/gi, '#FFFFFF')
+ }
+ if (theme === 'dark') {
+ svg = svg.replace(/#2a84f8/gi, '#181A18')
+ } else if (textColor) {
+ svg = svg.replace(/#181A18/gi, textColor)
+ }
+
+ return svg
+}
+
+export default function RMLogoDrawOn(props: Props) {
+ const {
+ theme = 'default',
+ trigger = 'load',
+ duration = 0.6,
+ stagger = 0.1,
+ initialDelay = 0,
+ easing = 'cubic-bezier(0.22, 1, 0.36, 1)',
+ fadeIn = false,
+ fadeDuration = 0.35,
+ replay = false,
+ replayDelay = 0.8,
+ drawOrder = 'top-down',
+ ghost = true,
+ ghostColor = '#DADADA',
+ ghostOpacity = 1,
+ ghostGap = 0.1,
+ autoPlay = true,
+ overlap = 1,
+ hoverTheme,
+ isHovered = false,
+ textColor,
+ width = '100%',
+ height = '100%',
+ oncePerSession = false,
+ sessionKey = 'default',
+ style,
+ className,
+ } = props
+
+ const hostRef = React.useRef(null)
+ const rafRef = React.useRef(null)
+ const replayTimer = React.useRef | null>(null)
+ const playedRef = React.useRef(false)
+ const ghostClonesRef = React.useRef([])
+
+ const activeTheme = isHovered && hoverTheme ? hoverTheme : theme
+ const sessionStorageKey = `rm-logo-played-${sessionKey}`
+
+ // Defer sessionStorage check to useEffect to prevent hydration mismatch.
+ // Server always renders false; client updates after mount.
+ const [hasPlayedThisSession, setHasPlayedThisSession] = React.useState(false)
+
+ React.useEffect(() => {
+ if (!oncePerSession) return
+ try {
+ setHasPlayedThisSession(sessionStorage.getItem(sessionStorageKey) === 'true')
+ } catch {
+ // sessionStorage unavailable
+ }
+ }, [oncePerSession, sessionStorageKey])
+
+ const markAsPlayed = React.useCallback(() => {
+ if (!oncePerSession) return
+ try {
+ sessionStorage.setItem(sessionStorageKey, 'true')
+ } catch {
+ // sessionStorage not available
+ }
+ }, [oncePerSession, sessionStorageKey])
+
+ const effectiveGhostColor = React.useMemo(() => {
+ if (ghostColor !== '#DADADA') return ghostColor
+ switch (activeTheme) {
+ case 'light':
+ case 'blue-white':
+ return '#CCCCCC'
+ case 'dark':
+ return '#FFFFFF'
+ default:
+ return ghostColor
+ }
+ }, [ghostColor, activeTheme])
+
+ function collectGroupsById(
+ svg: SVGSVGElement,
+ drawOrderMode: DrawOrder,
+ strokeOrder: Record = {}
+ ): { groups: SVGGraphicsElement[][]; reverseSet: Set } {
+ const strokeEls = Array.from(
+ svg.querySelectorAll(
+ 'g[clip-path] path, g[clip-path] line, g[clip-path] polyline, g[clip-path] polygon, g[clip-path] circle, g[clip-path] ellipse, g[clip-path] rect'
+ )
+ ) as SVGGraphicsElement[]
+
+ const readInlineStyle = (el: Element, prop: string) => {
+ const s = el.getAttribute('style') || ''
+ const m = s.match(new RegExp(`${prop}\\s*:\\s*([^;]+)`, 'i'))
+ return m?.[1]?.trim() || ''
+ }
+
+ const readStroke = (el: SVGGraphicsElement) =>
+ (el.getAttribute('stroke') || readInlineStyle(el, 'stroke') || '').trim()
+
+ const readStrokeWidth = (el: SVGGraphicsElement) => {
+ const sw = el.getAttribute('stroke-width') || readInlineStyle(el, 'stroke-width') || ''
+ const n = parseFloat(String(sw || '0'))
+ return isFinite(n) ? n : 0
+ }
+
+ const readOpacity = (el: SVGGraphicsElement) => {
+ const op = el.getAttribute('opacity') || readInlineStyle(el, 'opacity') || '1'
+ const n = parseFloat(String(op || '1'))
+ return isFinite(n) ? n : 1
+ }
+
+ const isDrawableStroke = (el: SVGGraphicsElement) => {
+ const stroke = readStroke(el)
+ const sw = readStrokeWidth(el)
+ const op = readOpacity(el)
+ return !!stroke && stroke !== 'none' && sw > 0 && op !== 0
+ }
+
+ const glyphMap = new Map()
+ const glyphSeen: string[] = []
+
+ for (const el of strokeEls) {
+ if (!isDrawableStroke(el)) continue
+ const g = el.closest('g[clip-path]') as SVGGElement | null
+ if (!g) continue
+ const clip = g.getAttribute('clip-path') || ''
+ const clipId = clip.match(/url\(#([^)]+)\)/)?.[1]
+ if (!clipId) continue
+ const glyphId = clipId.replace(/^_/, '')
+ if (!glyphMap.has(glyphId)) {
+ glyphMap.set(glyphId, { items: [] })
+ glyphSeen.push(glyphId)
+ }
+ glyphMap.get(glyphId)!.items.push(el)
+ }
+
+ const allGlyphIds =
+ drawOrderMode === 'top-down'
+ ? [
+ ...GLYPH_ORDER.filter((id) => glyphMap.has(id)),
+ ...glyphSeen.filter((id) => glyphMap.has(id) && !GLYPH_ORDER.includes(id)),
+ ]
+ : glyphSeen.filter((id) => glyphMap.has(id))
+
+ const reverseSet = new Set()
+ const groups: SVGGraphicsElement[][] = []
+
+ for (const glyphId of allGlyphIds) {
+ const entry = glyphMap.get(glyphId)!
+ const preferred = strokeOrder[glyphId]
+ const byId = new Map()
+ for (const el of entry.items) {
+ const id = el.id?.trim()
+ if (id) byId.set(id, el)
+ }
+
+ if (preferred?.length) {
+ const sorted: SVGGraphicsElement[] = []
+ for (const token of preferred) {
+ const reverse = token.startsWith('!')
+ const sid = reverse ? token.slice(1) : token
+ const hit = byId.get(sid)
+ if (hit) {
+ sorted.push(hit)
+ if (reverse) reverseSet.add(hit)
+ }
+ }
+ for (const el of entry.items) {
+ if (!sorted.includes(el)) sorted.push(el)
+ }
+ groups.push(sorted)
+ continue
+ }
+ groups.push(entry.items)
+ }
+
+ return { groups, reverseSet }
+ }
+
+ const play = React.useCallback(() => {
+ if (!hostRef.current || typeof window === 'undefined') return
+ if (playedRef.current && !replay) return
+ playedRef.current = true
+ markAsPlayed()
+
+ ghostClonesRef.current.forEach((n) => n.remove())
+ ghostClonesRef.current = []
+
+ if (replayTimer.current) clearTimeout(replayTimer.current)
+ if (rafRef.current) cancelAnimationFrame(rafRef.current)
+
+ const svg =
+ (hostRef.current as unknown as SVGSVGElement).tagName?.toLowerCase() === 'svg'
+ ? (hostRef.current as unknown as SVGSVGElement)
+ : (hostRef.current.querySelector('svg') as SVGSVGElement | null)
+
+ if (!svg) return
+
+ const { groups: originalGroups, reverseSet } = collectGroupsById(svg, drawOrder, STROKE_ORDER)
+ const originals = originalGroups.flat()
+ if (!originals.length) return
+
+ const lenMap = new WeakMap()
+ const ghostReverseSet = new Set()
+ const ghostGroups: SVGGraphicsElement[][] = []
+
+ if (ghost) {
+ originalGroups.forEach((group) => {
+ const clones: SVGGraphicsElement[] = []
+ group.forEach((orig) => {
+ const clone = orig.cloneNode(true) as SVGGraphicsElement
+ clone.style.setProperty('stroke', effectiveGhostColor, 'important')
+ clone.style.setProperty('fill', 'none', 'important')
+ orig.parentNode?.insertBefore(clone, orig)
+ ghostClonesRef.current.push(clone)
+ clones.push(clone)
+ if (reverseSet.has(orig)) ghostReverseSet.add(clone)
+ })
+ ghostGroups.push(clones)
+ })
+ }
+
+ const ghosts = ghostGroups.flat()
+
+ const prep = (el: SVGGraphicsElement) => {
+ let len = 0
+ try {
+ len = (el as SVGGeometryElement).getTotalLength?.() ?? 0
+ } catch {
+ len = 0
+ }
+ if (!len || !isFinite(len)) return 0
+ lenMap.set(el, len)
+ el.style.transition = 'none'
+ el.style.strokeDasharray = `${len} ${len}`
+ el.style.strokeDashoffset = `${len}`
+ el.style.willChange = 'stroke-dashoffset, opacity'
+ if (fadeIn) el.style.opacity = '0'
+ el.getBoundingClientRect()
+ return len
+ }
+
+ ghosts.forEach(prep)
+ originals.forEach(prep)
+
+ rafRef.current = requestAnimationFrame(() => {
+ const base = initialDelay || 0
+ const phase = Math.max(duration || 0, fadeIn ? fadeDuration || 0 : 0)
+ const step = duration * (1 - (overlap || 0)) + (stagger || 0)
+
+ ghostGroups.forEach((groupEls, gi) => {
+ const d = base + gi * step
+ groupEls.forEach((el) => {
+ const len = lenMap.get(el) || 0
+ if (!len) return
+ const dash = `stroke-dashoffset ${duration}s ${easing} ${d}s`
+ const fade = fadeIn ? `, opacity ${fadeDuration}s ${easing} ${d}s` : ''
+ el.style.transition = dash + fade
+ el.style.strokeDashoffset = ghostReverseSet.has(el) ? `${2 * len}` : '0'
+ if (fadeIn) el.style.opacity = String(ghostOpacity)
+ })
+ })
+
+ const ghostTotal = ghost
+ ? base + (originalGroups.length - 1) * step + phase + (ghostGap || 0)
+ : 0
+
+ originalGroups.forEach((groupEls, gi) => {
+ const d = (ghost ? ghostTotal : base) + gi * step
+ groupEls.forEach((el) => {
+ const len = lenMap.get(el) || 0
+ if (!len) return
+ const dash = `stroke-dashoffset ${duration}s ${easing} ${d}s`
+ const fade = fadeIn ? `, opacity ${fadeDuration}s ${easing} ${d}s` : ''
+ el.style.transition = dash + fade
+ el.style.strokeDashoffset = reverseSet.has(el) ? `${2 * len}` : '0'
+ el.style.opacity = '1'
+ })
+ })
+ })
+
+ if (replay) {
+ const n = originalGroups.length
+ const step = duration * (1 - (overlap || 0)) + (stagger || 0)
+ const phase = Math.max(duration || 0, fadeIn ? fadeDuration || 0 : 0)
+ const layerStart = ghost
+ ? (initialDelay || 0) + (n - 1) * step + phase + (ghostGap || 0)
+ : initialDelay || 0
+ const total = layerStart + (n - 1) * step + phase + (replayDelay || 0)
+
+ replayTimer.current = setTimeout(() => {
+ playedRef.current = false
+ play()
+ }, Math.max(0, total * 1000))
+ }
+ }, [
+ drawOrder,
+ duration,
+ easing,
+ effectiveGhostColor,
+ fadeIn,
+ fadeDuration,
+ ghost,
+ ghostGap,
+ ghostOpacity,
+ initialDelay,
+ markAsPlayed,
+ overlap,
+ replay,
+ replayDelay,
+ stagger,
+ ])
+
+ React.useEffect(() => {
+ if (!autoPlay) return
+ if (!hostRef.current) return
+
+ if (trigger === 'load') {
+ const t = setTimeout(play, 0)
+ return () => clearTimeout(t)
+ }
+
+ const el = hostRef.current
+ const io = new IntersectionObserver(
+ (entries) => {
+ if (entries.some((e) => e.isIntersecting)) play()
+ },
+ { threshold: 0.35 }
+ )
+ io.observe(el)
+ return () => io.disconnect()
+ }, [play, trigger, autoPlay])
+
+ React.useEffect(() => {
+ return () => {
+ if (rafRef.current) cancelAnimationFrame(rafRef.current)
+ if (replayTimer.current) clearTimeout(replayTimer.current)
+ }
+ }, [])
+
+ if (hasPlayedThisSession) {
+ return (
+
+ )
+ }
+
+ const { roleModelColor, textColorValue } = getThemeColors(activeTheme, textColor)
+
+ return (
+
+ )
+}
diff --git a/src/components/ui/button-animated.tsx b/src/components/ui/button-animated.tsx
deleted file mode 100644
index 97f211c..0000000
--- a/src/components/ui/button-animated.tsx
+++ /dev/null
@@ -1,329 +0,0 @@
-// Button component with label transition animation on hover
-import { motion } from 'motion/react'
-import type { Transition } from 'motion/react'
-import type { CSSProperties, MouseEventHandler } from 'react'
-
-import '@/components/ui/button.css'
-
-import { cn } from '@/lib/utils'
-
-interface ButtonPillProps {
- label: string
- useVariant?: boolean
- variant?:
- | 'dark'
- | 'light'
- | 'blue'
- | 'darkblue'
- | 'rmbrightblue'
- | 'brightblue'
- | 'green'
- | 'purple'
- | 'lightpurple'
- | 'bluegreen'
- | 'yellow'
- | 'ghost'
- backgroundColor?: string
- hoverBackground?: boolean
- hoverbackgroundColor?: string
- hoverColo?: string
- boxShadow?: string
- textColor?: string
- hoverTextColor?: string
- font?: CSSProperties
- // Icon slots
- iconLeft?: React.ReactNode
- iconRight?: React.ReactNode
- iconGap?: number
- style?: CSSProperties
- disabled?: boolean
- className?: string
- type?: 'button' | 'submit' | 'reset'
- onClick?: MouseEventHandler
-}
-
-/**
- * @framerSupportedLayoutWidth any
- * @framerSupportedLayoutHeight any
- */
-
-export default function ButtonPill(props: ButtonPillProps) {
- const {
- label,
- useVariant,
- variant,
- backgroundColor,
- textColor,
- hoverTextColor,
- font,
- hoverbackgroundColor,
- iconLeft,
- iconRight,
- hoverBackground = false,
- iconGap = 10,
- style,
- disabled,
- onClick,
- className,
- type = 'button',
- } = props
-
- const variants: Record<
- string,
- {
- bg: string
- textColor: string
- hoverTextColor: string
- boxShadow?: string
- }
- > = {
- dark: {
- bg: 'var(--blue-green-900)',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- },
- light: {
- bg: 'var(--op-color-white)',
- textColor: 'var(--op-color-on-background)',
- hoverTextColor: 'var(--op-color-on-background)',
- },
- blue: {
- bg: 'var(--blue-500)',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- },
- rmbrightblue: {
- bg: 'var(--blue-400)',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- },
- brightblue: {
- bg: 'var(--blue-100)',
- textColor: 'var(--blue-green-900)',
- hoverTextColor: 'var(--blue-green-900)',
- },
- darkblue: {
- bg: 'var(--blue-900)',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- },
- green: {
- bg: 'var(--green-800)',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- },
- purple: {
- bg: 'var(--purple-900)',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- },
- lightpurple: {
- bg: 'var(--purple-100)',
- textColor: 'var(--op-color-on-background)',
- hoverTextColor: 'var(--op-color-on-background)',
- },
- bluegreen: {
- bg: 'var(--blue-green-400)',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- },
- yellow: {
- bg: 'var(--brand-Bright-Yellow)',
- textColor: 'var(--blue-green-900)',
- hoverTextColor: 'var(--blue-green-900)',
- },
- ghost: {
- bg: 'transparent',
- textColor: 'var(--op-color-white)',
- hoverTextColor: 'var(--op-color-white)',
- boxShadow: 'inset 0 0 0 1px var(--op-color-white)',
- },
- }
-
- // Use variant if provided and exists, otherwise fall back to custom colors
- const shouldUseVariant = useVariant || (variant && variant in variants)
-
- const colors =
- shouldUseVariant && variant && variants[variant]
- ? variants[variant]
- : {
- bg: backgroundColor ?? 'transparent',
- textColor: textColor ?? 'inherit',
- hoverTextColor: hoverTextColor ?? textColor ?? 'inherit',
- hoverbackgroundColor: hoverbackgroundColor,
- }
-
- const MotionButton = motion.button
-
- const buttonVariants = {
- rest: {
- filter: 'brightness(100%) saturate(100%)',
- transition: { duration: 0.35, ease: 'easeInOut' as const },
- },
- hover: {
- backgroundColor: hoverBackground ? hoverbackgroundColor : undefined,
- filter: hoverBackground
- ? 'brightness(100%) saturate(100%)'
- : 'brightness(110%) saturate(134%)',
- transition: { duration: 0.25, ease: 'easeInOut' as const },
- },
- tap: {
- scale: 0.98,
- transition: { duration: 0.15, ease: 'easeInOut' as const },
- },
- }
-
- const textMotion: Transition = {
- duration: 0.25,
- ease: 'easeInOut',
- type: 'tween',
- }
-
- const topVariant = {
- rest: {
- y: '0%',
- opacity: 1,
- transition: textMotion,
- },
- hover: {
- y: '-100%',
- opacity: 0,
- transition: textMotion,
- },
- }
-
- const bottomVariant = {
- rest: {
- y: '100%',
- opacity: 0,
- transition: textMotion,
- },
- hover: {
- y: '0%',
- opacity: 1,
- transition: textMotion,
- },
- }
-
- const computedLineHeight =
- typeof font?.lineHeight === 'number'
- ? `${font.lineHeight}px`
- : font?.lineHeight || '1em'
-
- const commonIconStyle: CSSProperties = {
- width: `calc(${computedLineHeight} + 4px)`,
- height: `calc(${computedLineHeight} + 4px)`,
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'center',
- flexShrink: 0,
- }
-
- const content = (
-
- {/* Start Icon */}
- {iconLeft && (
-
- {iconLeft}
-
- )}
- {/* Label pair */}
-
-
- {label}
-
-
- {label}
-
-
- {/* End Icon */}
- {iconRight && (
-
- {iconRight}
-
- )}
-
- {content}
-
-
- )
-}
diff --git a/src/components/ui/case-study-card.tsx b/src/components/ui/case-study-card.tsx
index f5f9105..37a5133 100644
--- a/src/components/ui/case-study-card.tsx
+++ b/src/components/ui/case-study-card.tsx
@@ -18,6 +18,7 @@ export interface CaseStudyCardProps {
variant?: 'auto' | 'idle' | 'hover' | 'mobile'
className?: string
isLoading?: boolean
+ height?: number | string
}
const contentVariants = {
@@ -38,6 +39,7 @@ export const CaseStudyCard = ({
variant = 'mobile',
className,
isLoading = false,
+ height: cardHeight = 320,
}: CaseStudyCardProps) => {
const [isMobile, setIsMobile] = React.useState(false)
const [isHovered, setIsHovered] = React.useState(false)
@@ -85,7 +87,7 @@ export const CaseStudyCard = ({
className={cn(className)}
style={{
position: 'relative',
- height: 320,
+ height: cardHeight,
width: '100%',
overflow: 'hidden',
borderRadius: cornerRadius,
@@ -144,7 +146,7 @@ export const CaseStudyCard = ({
role="button"
style={{
position: 'relative',
- height: 320,
+ height: cardHeight,
width: '100%',
borderRadius: cornerRadius,
overflow: 'clip',
@@ -204,17 +206,16 @@ export const CaseStudyCard = ({
transition={{ duration: 0.3, delay: 0.1 }}
style={{
marginBottom: 12,
- height: 60,
- width: 200
+ height: 48,
+ width: 160,
+ position: 'relative',
}}
>
)}
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 56f9151..18da501 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -73,7 +73,7 @@
--blue-green-600: #16333cff;
--blue-green-700: #0e2e34ff;
--blue-green-800: #0b252a;
- --blue-green-900: #041f20ff;
+ --blue-green-900: #04242B;
--blue-green-1000: #011418;
--blue-100: #87d4e9ff;
--blue-200: #6fbee0ff;