1import{r as c,j as e,L as le}from"./react-vendor-VptLKEvj.js";import{h as p,C as Ze,a2 as Ge,I as j,u as et,P as tt,S as at,d as N,f as d,g as k,V as F,e as I,t as he,r as ue,F as _,a1 as me,O as rt,Q as be,p as ge,i as g,a3 as Q,a4 as st,a5 as nt,a6 as lt,a7 as ot,a as fe,a8 as je,m as we,q as it,E as z,l as ve,a9 as G,y as u,v as m,n as D,J as ye,o as Ne,K as dt,aa as ke,L as Ce}from"./index-Jaal_l5h.js";import{a as ct,P as xt}from"./panel-left-open-DTDXPvr0.js";import{S as Ee}from"./search-EERruYMY.js";import{S as Se,a as Fe,E as pt}from"./secondaryNavPill-D5SnV-ZD.js";import{A as ht,a as Z,b as ee,c as te}from"./accordion-D2EM5m7v.js";import{S as ut,t as Me,u as mt,L as qe,v as Oe,w as Ve}from"./ui-vendor-BsZg97Zl.js";import{I as bt,a as gt,b as ft,c as jt,d as wt,e as vt}from"./illustrative-card-CoIJk5mB.js";import{D as yt,b as Nt,a as kt,c as Ct,d as St,e as Ft}from"./dialog-DeGul1jS.js";import{I as At}from"./image-BCnjid5L.js";import{C as Tt}from"./ComparisonTable-CSfSLypi.js";import{S as Ae}from"./SideBySideComparison-D7iJS-_H.js";import{Z as Te}from"./zap-CzXaavDV.js";import{F as E}from"./file-text-Dmwx0yjm.js";import{B as Re}from"./building-2-CKaauH2V.js";import{V as ae}from"./video-yeb-a9Jh.js";import{F as L}from"./CircleStackIcon-Cbeu73P_.js";import{F as Ie}from"./BookOpenIcon-CXsPwSG_.js";import{F as Le}from"./BeakerIcon-BzTvNoJS.js";import{F as Rt}from"./CodeBracketIcon-iwfmB5OE.js";import{F as It}from"./CpuChipIcon-DCZCZcxB.js";import{I as Lt,M as Bt,C as Dt}from"./mic-vocal-BYV-3GqF.js";import{D as Pt}from"./download-D7nxXMeM.js";import{C as re}from"./clock-CgUazXcs.js";import{C as _t}from"./check-CQg5OrAJ.js";import{S as zt}from"./share-2-DIVbLpZe.js";import{P as Gt}from"./play-DaIlhQbB.js";import{F as M}from"./PuzzlePieceIcon-0D6CCqnF.js";import{F as q}from"./ArrowsPointingInIcon-l6brKkt-.js";import{F as O}from"./ChatBubbleLeftRightIcon-BgCdW8a-.js";import{F as V}from"./CubeIcon-DjQZX5lF.js";import{F as W}from"./CheckBadgeIcon-CXirJ3dp.js";import{F as Be}from"./MagnifyingGlassCircleIcon-B7h2PawA.js";import{F as De}from"./MapIcon-DXEu4JRJ.js";import{F as Pe}from"./ShareIcon-BErXV-C-.js";import{F as _e}from"./FingerPrintIcon-I5T3DA9M.js";import{F as Et}from"./ShieldCheckIcon-B7RAU7Bn.js";import"./minus-1isqasuh.js";function Mt({title:r,titleId:s,...o},f){return c.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:f,"aria-labelledby":s},o),r?c.createElement("title",{id:s},r):null,c.createElement("path",{fillRule:"evenodd",d:"M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z",clipRule:"evenodd"}),c.createElement("path",{fillRule:"evenodd",d:"M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z",clipRule:"evenodd"}))}const H=c.forwardRef(Mt),ze=[{key:"atoms",label:"Atoms",items:[{id:"fluree-button",label:"FlureeButton â Primary"},{id:"fluree-button-secondary",label:"FlureeButton â Secondary"},{id:"fluree-button-tertiary",label:"FlureeButton â Tertiary"},{id:"fluree-input",label:"FlureeInput"},{id:"fluree-textarea",label:"FlureeTextarea"},{id:"fluree-select",label:"FlureeSelect"},{id:"fluree-label",label:"FlureeLabel"},{id:"fluree-checkbox",label:"FlureeCheckbox"},{id:"fluree-radio",label:"FlureeRadio"},{id:"badge",label:"Badge"},{id:"button-shadcn",label:"Button (shadcn)"},{id:"separator",label:"Separator"},{id:"section-label",label:"SectionLabel"},{id:"solid-section-label",label:"SolidSectionLabel"},{id:"avatar",label:"Avatar / Initials"},{id:"tags",label:"Tags"},{id:"status-badges",label:"Status Badges"},{id:"reading-progress",label:"Reading Progress Bar"}]},{key:"molecules",label:"Molecules",items:[{id:"accordion",label:"Accordion"},{id:"card",label:"Card"},{id:"illustrative-card",label:"IllustrativeCard"},{id:"dialog",label:"Dialog"},{id:"tabs",label:"Tabs"},{id:"toast",label:"Toast"},{id:"tooltip",label:"Tooltip"},{id:"scroll-reveal",label:"ScrollReveal"},{id:"newsletter-signup",label:"NewsletterSignup"},{id:"filter-pills",label:"Filter Pills / Chips"},{id:"author-byline",label:"Author Byline"},{id:"feature-list-item",label:"Feature List Item"},{id:"quote-block",label:"Quote / Testimonial"},{id:"share-buttons",label:"Share Buttons"},{id:"stat-metric",label:"Stat / Metric Display"},{id:"code-block",label:"Code Block"}]},{key:"organisms",label:"Organisms",items:[{id:"visual-placeholder",label:"VisualPlaceholder"},{id:"breadcrumb-pattern",label:"Breadcrumb Navigation"},{id:"blog-card",label:"Blog Card"},{id:"video-card",label:"Video Card"},{id:"webinar-card",label:"Webinar Card"},{id:"resource-card",label:"Resource Card"},{id:"case-study-card",label:"Case Study Card"},{id:"toc-sidebar",label:"Table of Contents (Sidebar)"},{id:"cta-card",label:"CTA Card"},{id:"sticky-filter-bar",label:"Sticky Filter Bar â Topic Row"}]},{key:"templates",label:"Templates",items:[{id:"section-template",label:"SectionTemplate"},{id:"feature-block-with-menu",label:"FeatureBlockWithMenu"},{id:"interactive-panel-group",label:"InteractivePanelGroup"},{id:"tables",label:"Tables"},{id:"global-nav",label:"Global Navigation (Navbar)"},{id:"secondary-subnav",label:"Secondary Navigation (Subnav)"},{id:"secondary-nav-pills",label:"Resources Secondary Nav â Resource-Type Ribbon"},{id:"announcement-banner",label:"Announcement Banner"}]},{key:"pages",label:"Pages",items:[]}],se="radial-gradient(ellipse 180% 350% at -5% 100%, rgba(183,117,214,0.38) 0%, rgba(206,241,255,0.15) 42%, rgba(231,164,159,0.13) 71%, rgba(255,87,64,0.11) 100%), rgba(253,253,253,0.72)",ne="0px 0px 8px 0px rgba(19,198,255,0.24)",qt=({isOpen:r,onOpenChange:s})=>{const[o,f]=c.useState(""),[w,y]=c.useState(new Set),S=c.useRef(null),B=c.useRef(null);c.useEffect(()=>{if(!r)return;const x=h=>{h.key==="Escape"&&s(!1)};return document.addEventListener("keydown",x),()=>document.removeEventListener("keydown",x)},[r,s]),c.useEffect(()=>{var x;if(r){const h=setTimeout(()=>{var b;return(b=S.current)==null?void 0:b.focus()},50);return()=>clearTimeout(h)}else document.activeElement&&document.activeElement.closest("#dev-components-nav")&&((x=B.current)==null||x.focus())},[r]);const J=o.trim().length>0,T=c.useMemo(()=>{const x=o.trim().toLowerCase();return x?ze.map(h=>({...h,items:h.items.filter(b=>b.label.toLowerCase().includes(x))})).filter(h=>h.items.length>0):ze},[o]),K=x=>J?!0:!w.has(x),R=x=>{y(h=>{const b=new Set(h);return b.has(x)?b.delete(x):b.add(x),b})};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:p("group fixed top-[82px] left-4 z-40 flex items-center",r?"hidden":"hidden lg:flex"),children:[e.jsx("span",{id:"dev-nav-fab-tooltip",role:"tooltip","aria-hidden":"true",className:"pointer-events-none absolute left-0 top-1/2 -translate-y-1/2 whitespace-nowrap rounded-full py-[9px] pl-[56px] pr-[18px] font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#202152] backdrop-blur-[12px] opacity-0 -translate-x-2 transition-all duration-300 ease-out group-hover:opacity-100 group-hover:translate-x-0 group-focus-within:opacity-100 group-focus-within:translate-x-0",style:{background:se,boxShadow:ne},children:"Component Library"}),e.jsx("button",{ref:B,type:"button",onClick:()=>s(!0),"aria-expanded":r,"aria-controls":"dev-components-nav","aria-label":"Open Component Library","aria-describedby":"dev-nav-fab-tooltip",className:"relative z-10 flex h-11 w-11 items-center justify-center rounded-full backdrop-blur-[12px] text-[#091133] transition-all duration-200 hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#13c6ff] focus-visible:ring-offset-2",style:{background:se,boxShadow:ne},children:e.jsx(ct,{className:"h-5 w-5"})})]}),e.jsxs("aside",{id:"dev-components-nav","aria-label":"Component library navigation",className:p("fixed left-0 top-0 bottom-0 z-40 hidden w-80 flex-col backdrop-blur-[12px] border-r border-[rgba(19,198,255,0.24)]","transform transition-transform duration-300 ease-out","lg:flex",r?"translate-x-0":"-translate-x-full"),style:{background:se,boxShadow:ne},children:[e.jsx("div",{className:"h-[66px] shrink-0"}),e.jsxs("div",{className:"shrink-0 px-4 pb-4 pt-4",children:[e.jsxs("div",{className:"mb-3 flex items-center justify-between",children:[e.jsx("p",{className:"font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#202152]",children:"Component Library"}),e.jsx("button",{type:"button",onClick:()=>s(!1),"aria-label":"Close component navigation",title:"Close (Esc)",className:"flex h-7 w-7 items-center justify-center rounded-full text-[#091133] transition-colors hover:bg-[rgba(19,198,255,0.15)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#13c6ff]",children:e.jsx(xt,{className:"h-4 w-4"})})]}),e.jsxs("div",{className:"relative",children:[e.jsx(Ee,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6b7280]"}),e.jsx("input",{ref:S,type:"text",value:o,onChange:x=>f(x.target.value),placeholder:"Filter components",className:"w-full appearance-none rounded-[8px] border-2 border-solid border-[rgba(19,198,255,0.66)] bg-[rgba(207,243,255,0.66)] py-[6px] pl-9 pr-[8px] font-operator font-[325] text-[14px] leading-[20px] text-[#282966] transition-all duration-150 placeholder:text-[#6b7280] focus:border-[#13c6ff] focus:shadow-[0px_0px_8px_0px_#13c6ff] focus:outline-none"})]})]}),e.jsx("nav",{className:"flex-1 overflow-y-auto px-2 pb-8",children:T.length===0?e.jsxs("p",{className:"px-4 font-gotham-narrow text-[13px] text-[#202152]",children:['No components match "',o,'"']}):T.map(x=>{const h=K(x.key);return e.jsxs("div",{className:"mb-2",children:[e.jsxs("button",{type:"button",onClick:()=>R(x.key),"aria-expanded":h,"aria-controls":`tier-${x.key}`,className:"flex w-full items-center justify-between rounded-[6px] px-3 py-2 font-gotham font-[900] text-[12px] uppercase tracking-[0.24px] text-[#091133] hover:bg-[rgba(19,198,255,0.1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#13c6ff]",children:[e.jsxs("span",{children:[x.label,e.jsx("span",{className:"ml-2 font-operator font-[400] text-[10px] text-[#4b57a5]",children:x.items.length})]}),e.jsx(Ze,{className:p("h-4 w-4 transition-transform duration-200",!h&&"-rotate-90")})]}),h&&(x.items.length===0?e.jsx("div",{id:`tier-${x.key}`,className:"mt-1 pl-3",children:e.jsx("p",{className:"px-3 py-1.5 font-gotham-narrow italic text-[12px] leading-[18px] text-[rgba(75,87,165,0.7)]",children:"Coming soon â page compositions built from templates and organisms"})}):e.jsx("ul",{id:`tier-${x.key}`,className:"mt-1 space-y-0.5 pl-3",children:x.items.map(b=>e.jsx("li",{children:e.jsx("a",{href:`#${b.id}`,className:"block rounded-[4px] px-3 py-1.5 font-gotham-narrow text-[13px] leading-[18px] text-[#202152] transition-colors hover:bg-[rgba(19,198,255,0.12)] hover:text-[#091133] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#13c6ff]",children:b.label})},b.id))}))]},x.key)})})]})]})},Ot=Ge("inline-flex items-center rounded-full border-[1.25px] border-solid px-2.5 py-0.5 text-xs font-gotham font-[800] tracking-[0.24px] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[#13c6ff] focus-visible:ring-offset-2",{variants:{variant:{default:"bg-[#13c6ff] border-[#13c6ff] text-[#091133]",secondary:"bg-[#CFF3FF] border-[#CFF3FF] text-[#091133]",de
1structive:"bg-[#FF6813] border-[#FF6813] text-white",outline:"bg-[rgba(206,241,255,0.33)] border-[#4b57a5] text-[#4b57a5]"}},defaultVariants:{variant:"default"}});function $({className:r,variant:s,...o}){return e.jsx("div",{className:p(Ot({variant:s}),r),...o})}const Vt=Ge("inline-flex items-center justify-center gap-[6px] whitespace-nowrap font-gotham font-[800] select-none transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#13c6ff] focus-visible:ring-offset-2 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",{variants:{variant:{default:"border-[1.25px] border-solid bg-[#13c6ff] border-[#13c6ff] text-[#091133] hover:border-[#00a0d1] hover:shadow-[0px_4px_4px_0px_rgba(9,19,49,0.24)] active:border-[#c9d3ec] active:shadow-[inset_0px_4px_4px_0px_#00a0d1] disabled:bg-[#cff3ff] disabled:border-[#cff3ff] disabled:opacity-100",destructive:"border-[1.25px] border-solid bg-[#FF6813] border-[#FF6813] text-white hover:border-[#d45510] hover:shadow-[0px_4px_4px_0px_rgba(9,19,49,0.24)] active:border-[#c9d3ec] active:shadow-[inset_0px_4px_4px_0px_#d45510] disabled:bg-[#FF6813]/40 disabled:border-[#FF6813]/40 disabled:opacity-100",outline:"border-[1.25px] border-solid bg-[rgba(206,241,255,0.33)] border-[#4b57a5] text-[#4b57a5] hover:bg-[#cff3ff] hover:border-[#00a0d1] hover:text-[#091133] hover:shadow-[0px_4px_4px_0px_rgba(9,19,49,0.24)] active:border-[#cff3ff] active:bg-transparent active:text-[#091133] active:shadow-[inset_0px_4px_4px_0px_rgba(11,61,145,0.3)] disabled:border-[#cff3ff] disabled:opacity-100",secondary:"border-[1.25px] border-solid bg-[#CFF3FF] border-[#CFF3FF] text-[#091133] hover:border-[#13c6ff] hover:shadow-[0px_4px_4px_0px_rgba(9,19,49,0.24)] active:border-[#c9d3ec] active:shadow-[inset_0px_4px_4px_0px_rgba(19,198,255,0.8)] disabled:bg-[#cff3ff] disabled:border-[#cff3ff] disabled:opacity-100",ghost:"border-[1.25px] border-solid bg-transparent border-[#4b57a5] text-[#4b57a5] hover:border-[#202152] hover:text-[#091133] hover:shadow-[0px_4px_4px_0px_rgba(9,19,49,0.24)] active:border-[#cff3ff] active:text-[#091133] active:shadow-[inset_0px_4px_4px_0px_rgba(11,61,145,0.3)] disabled:border-[#cff3ff] disabled:opacity-100",link:"text-[#4b57a5] underline-offset-4 hover:underline hover:text-[#091133]"},size:{default:"h-[48px] px-[22px] pt-[8px] pb-[9px] rounded-[32px] text-[16px] leading-[24px] tracking-[0.32px] [&_svg]:size-4",sm:"h-[32px] px-[16px] pt-[8px] pb-[9px] rounded-[16px] text-[14px] leading-[20px] tracking-[0.28px] [&_svg]:size-3.5",lg:"h-[56px] px-[28px] pt-[12px] pb-[13px] rounded-[28px] text-[18px] leading-[28px] tracking-[0.36px] [&_svg]:size-[18px]",icon:"h-[48px] w-[48px] rounded-[32px] [&_svg]:size-4"}},defaultVariants:{variant:"default",size:"default"}}),A=c.forwardRef(({className:r,variant:s,size:o,asChild:f=!1,...w},y)=>{const S=f?ut:"button";return e.jsx(S,{className:p(Vt({variant:s,size:o,className:r})),ref:y,...w})});A.displayName="Button";const We=c.forwardRef(({className:r,...s},o)=>e.jsx("div",{ref:o,className:p("rounded-2xl border border-white/50 bg-white/[0.87] backdrop-blur-[12px] text-card-foreground shadow-glass",r),...s}));We.displayName="Card";const He=c.forwardRef(({className:r,...s},o)=>e.jsx("div",{ref:o,className:p("flex flex-col space-y-1.5 p-6",r),...s}));He.displayName="CardHeader";const $e=c.forwardRef(({className:r,...s},o)=>e.jsx("h3",{ref:o,className:p("text-2xl font-extrabold leading-none tracking-tight",r),...s}));$e.displayName="CardTitle";const Ue=c.forwardRef(({className:r,...s},o)=>e.jsx("p",{ref:o,className:p("text-sm text-muted-foreground",r),...s}));Ue.displayName="CardDescription";const Xe=c.forwardRef(({className:r,...s},o)=>e.jsx("div",{ref:o,className:p("p-6 pt-0",r),...s}));Xe.displayName="CardContent";const Ye=c.forwardRef(({className:r,...s},o)=>e.jsx("div",{ref:o,className:p("flex items-center p-6 pt-0",r),...s}));Ye.displayName="CardFooter";const oe=c.forwardRef(({className:r,...s},o)=>e.jsx("div",{ref:o,className:p("flex flex-col rounded-2xl border border-transparent bg-card p-7","shadow-[0_0_0_1px_rgba(9,17,51,0.04),0_0_8px_rgba(9,17,51,0.025),0_6px_16px_-4px_rgba(9,17,51,0.05),0_16px_32px_-10px_rgba(9,17,51,0.06)]","transition-shadow","hover:shadow-[0_0_0_1px_rgba(9,17,51,0.06),0_0_12px_rgba(9,17,51,0.04),0_10px_22px_-4px_rgba(9,17,51,0.07),0_24px_48px_-10px_rgba(9,17,51,0.09)]",r),...s}));oe.displayName="IconCard";const ie=c.forwardRef(({className:r,size:s="md",...o},f)=>e.jsx(j,{ref:f,size:s,className:p("mb-5",r),...o}));
1ie.displayName="IconCardIcon";const de=c.forwardRef(({className:r,...s},o)=>e.jsx("h3",{ref:o,className:p("text-xl font-extrabold tracking-tight leading-snug text-foreground mb-2",r),...s}));de.displayName="IconCardTitle";const ce=c.forwardRef(({className:r,...s},o)=>e.jsx("p",{ref:o,className:p("text-sm leading-relaxed text-muted-foreground",r),...s}));ce.displayName="IconCardDescription";const xe=c.forwardRef(({className:r,...s},o)=>e.jsx("div",{ref:o,className:p("mt-5",r),...s}));xe.displayName="IconCardAction";const pe=c.forwardRef(({className:r,orientation:s="horizontal",decorative:o=!0,...f},w)=>e.jsx(Me,{ref:w,decorative:o,orientation:s,className:p("shrink-0 bg-border",s==="horizontal"?"h-[1px] w-full":"h-full w-[1px]",r),...f}));pe.displayName=Me.displayName;const Wt=mt,Je=c.forwardRef(({className:r,...s},o)=>e.jsx(qe,{ref:o,className:p("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",r),...s}));Je.displayName=qe.displayName;const X=c.forwardRef(({className:r,...s},o)=>e.jsx(Oe,{ref:o,className:p("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",r),...s}));X.displayName=Oe.displayName;const Y=c.forwardRef(({className:r,...s},o)=>e.jsx(Ve,{ref:o,className:p("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",r),...s}));Y.displayName=Ve.displayName;const U=({label:r,aspectRatio:s="16/7",className:o=""})=>e.jsx("div",{className:`rounded-2xl border border-dashed border-accent/20 bg-accent/[0.03] overflow-hidden ${o}`,style:{aspectRatio:s},children:e.jsx("div",{className:"w-full h-full flex items-center justify-center",children:e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"w-10 h-10 rounded-xl bg-accent/10 flex items-center justify-center mx-auto mb-3",children:e.jsx(At,{className:"w-5 h-5 text-accent/40"})}),e.jsx("p",{className:"text-xs font-mono uppercase tracking-[0.2em] text-fluree-purple/40",children:r})]})})}),C="0 0 0 1px rgba(9,17,51,0.04), 0 0 8px rgba(9,17,51,0.025), 0 6px 16px -4px rgba(9,17,51,0.05), 0 16px 32px -10px rgba(9,17,51,0.06)",l=({id:r,title:s,children:o})=>e.jsxs("div",{id:r,className:"mb-20 scroll-mt-24",children:[e.jsx("h2",{className:"mb-8 font-gotham font-[900] text-[30px] leading-[36px] tracking-[0.6px] text-[#091133]",children:s}),o]}),t=({label:r,children:s,wrap:o})=>e.jsxs("div",{className:"mb-6",children:[e.jsx("p",{className:"mb-3 font-operator font-[700] text-[12px] uppercase tracking-[1.6px] text-[#202152]",children:r}),e.jsx("div",{className:`flex ${o?"flex-wrap":""} items-start gap-4`,children:s})]}),n=({rows:r})=>e.jsx("div",{className:"overflow-x-auto scrollbar-hide rounded-[8px] border border-[rgba(19,198,255,0.3)] text-[13px]",children:e.jsxs("table",{className:"w-full",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"bg-[rgba(207,243,255,0.4)]",children:[e.jsx("th",{className:"px-3 py-2 text-left font-gotham-narrow font-[700] text-[#091133]",children:"Prop"}),e.jsx("th",{className:"px-3 py-2 text-left font-gotham-narrow font-[700] text-[#091133]",children:"Type"}),e.jsx("th",{className:"px-3 py-2 text-left font-gotham-narrow font-[700] text-[#091133]",children:"Default"})]})}),e.jsx("tbody",{children:r.map(([s,o,f],w)=>e.jsxs("tr",{className:w%2?"bg-[rgba(207,243,255,0.15)]":"",children:[e.jsx("td",{className:"px-3 py-1.5 font-operator text-[#091133]",children:s}),e.jsx("td",{className:"px-3 py-1.5 font-operator text-[#202152]",children:o}),e.jsx("td",{className:"px-3 py-1.5 font-operator text-[#4b57a5]",children:f})]},w))})]})}),i=({links:r})=>e.jsxs("div",{className:"flex flex-wrap gap-2 mt-4 mb-2",children:[e.jsx("span",{className:"font-gotham-narrow font-[500] text-[12px] text-[#202152] uppercase tracking-[0.1em] self-center",children:"View in context:"}),r.map(s=>e.jsxs(le,{to:s.href,className:"inline-flex items-center gap-1 rounded-full border border-[rgba(19,198,255,0.4)] bg-[rgba(207,243,255,0.3)] px-3 py-1 font-gotham-narrow text-[12px] text-[#091133] hover:bg-[rgba(19,198,255,0.2)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#13c6ff] focus-visible:ring-offset-2",children:[s.label," ",e.jsx(F,{className:"size-3"})]},s.href))]}),P=({label:r,color:s})=>e.jsx("div",{className:`mb-6 mt-8 font-gotham font-[900] text-[14px] tracking-[0.28px] uppercase ${s}`,children:r}),Ta=()=>{const[r,s]=c.useState({}),[o,f]=c.useState(""),{toast:w}=et(),[y,S]=c.useState("all"),[B,J]=c.useState(""),[T,K]=c.useState(!0),[R,x]=c.useState("All Topics"),[h,b]=c.useState(()=>typeof window>"u"?!1:localStorage.getItem("dev-nav-panel-open")==="1");c.useEffect(()=>{localStorage.setItem("dev-nav-panel-open",h?"1":"0")},[h]);const Ke=a=>s(v=>({...v,[a]:!v[a]}
1));return e.jsxs(tt,{children:[e.jsx(at,{title:"Dev Components",description:"Internal component showcase.",noindex:!0}),e.jsx(qt,{isOpen:h,onOpenChange:b}),e.jsx("div",{className:p("transition-[margin-left] duration-300 ease-out",h?"lg:ml-80":"ml-0"),children:e.jsx("section",{className:"pb-20 pt-32 md:pt-40",children:e.jsxs("div",{className:p("container px-6",h?"lg:mx-0 lg:max-w-none mx-auto":"mx-auto"),children:[e.jsx(N,{label:"Yeti Design System",variant:"vibrant"}),e.jsx("h1",{className:"mt-5 text-4xl md:text-5xl font-extrabold tracking-tight text-foreground leading-[1.05]",children:"Component Library"}),e.jsx("p",{className:"mt-5 text-lg md:text-xl leading-relaxed text-muted-foreground max-w-[65ch]",children:"Every presentation-layer component used across the Fluree site â organized by atomic design tiers (Atoms â Molecules â Organisms â Templates â Pages). Use the left-nav panel for quick navigation and filtering."}),e.jsx("div",{className:"mt-16"}),e.jsx(P,{label:"Atoms",color:"text-[#13c6ff]"}),e.jsxs(l,{id:"fluree-button",title:"FlureeButton â Primary",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[600px]",children:["Solid filled buttons for principal CTAs. Three theme palettes (Blue, Purple, Lighter-Blue) across six sizes. ",e.jsx("strong",{children:"Gotham Black (900)"})," weight."]}),e.jsx(t,{label:"Themes",wrap:!0,children:["blue","purple","lighter-blue"].map(a=>e.jsx(d,{theme:a,size:"md",children:a},a))}),e.jsx(t,{label:"Size scale (blue theme)",wrap:!0,children:["xxs","xs","sm","md","lg","xl"].map(a=>e.jsx(d,{size:a,children:a.toUpperCase()},a))}),e.jsxs(t,{label:"Icons",wrap:!0,children:[e.jsx(d,{iconLeft:e.jsx(Te,{}),size:"sm",children:"Icon Left"}),e.jsx(d,{iconRight:e.jsx(k,{}),size:"sm",children:"Icon Right"}),e.jsx(d,{iconLeft:e.jsx(Te,{}),iconRight:e.jsx(k,{}),size:"sm",children:"Both"})]}),e.jsxs(t,{label:"States",wrap:!0,children:[e.jsx(d,{children:"Default"}),e.jsx(d,{pressed:!0,children:"Pressed (held)"}),e.jsx(d,{variant:"ghost",pressed:!0,children:"Ghost pressed"}),e.jsx(d,{disabled:!0,children:"Disabled (blue)"}),e.jsx(d,{theme:"purple",disabled:!0,children:"Disabled (purple)"}),e.jsx(d,{theme:"lighter-blue",disabled:!0,children:"Disabled (lighter)"})]}),e.jsx(n,{rows:[["variant",'"primary"','"primary" (default)'],["theme",'"blue" | "purple" | "lighter-blue"','"blue"'],["size",'"xxs" | "xs" | "sm" | "md" | "lg" | "xl"','"md"'],["iconLeft / iconRight","ReactNode","â"],["pressed","boolean â holds the variant's :active (indented) styling for selected states, e.g. the active tab in a tab set","false"],["disabled","boolean","false"],["asChild","boolean","false"]]}),e.jsx(i,{links:[{label:"Homepage CTAs",href:"/"},{label:"Pricing",href:"/pricing"},{label:"Dev: Buttons",href:"/dev/buttons"}]})]}),e.jsxs(l,{id:"fluree-button-secondary",title:"FlureeButton â Secondary (Outline + Ghost)",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[600px]",children:["Lower-emphasis buttons for secondary actions. Two sub-variants: ",e.jsx("strong",{children:"Outline"})," (border + translucent fill) and ",e.jsx("strong",{children:"Ghost"})," (border only, transparent fill). Both use ",e.jsx("strong",{children:"Gotham Black (900)"})," weight and share the same pressed/active state with an inset shadow."]}),e.jsx(t,{label:"Outline â size scale",wrap:!0,children:["xxs","xs","sm","md","lg","xl"].map(a=>e.jsx(d,{variant:"outline",size:a,children:a.toUpperCase()},a))}),e.jsx(t,{label:"Ghost â size scale",wrap:!0,children:["xxs","xs","sm","md","lg","xl"].map(a=>e.jsx(d,{variant:"ghost",size:a,children:a.toUpperCase()},a))}),e.jsxs(t,{label:"Outline â icons + states",wrap:!0,children:[e.jsx(d,{variant:"outline",iconRight:e.jsx(k,{}),size:"sm",children:"Learn More"}),e.jsx(d,{variant:"outline",iconLeft:e.jsx(F,{}),size:"sm",children:"Docs"}),e.jsx(d,{variant:"outline",disabled:!0,children:"Disabled"})]}),e.jsxs(t,{label:"Ghost â icons + states",wrap:!0,children:[e.jsx(d,{variant:"ghost",iconRight:e.jsx(k,{}),size:"sm",children:"Learn More"}),e.jsx(d,{variant:"ghost",disabled:!0,children:"Disabled"})]}),e.jsx(t,{label:"Paired CTAs (common pattern)",wrap:!0,children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(d,{theme:"purple",size:"lg",iconRight:e.jsx(k,{}),children:"Book a Demo"}),e.jsx(d,{variant:"outline",size:"lg",children:"See How It Works"})]})}),e.jsx(n,{rows:[["variant",'"outline" | "ghost"',"â"],["Outline default","bg-rgba(206,241,255,0.33), border-[#4b57a5], text-[#4b57a5]","â"],["Outline hover","bg-[#cff3ff], border-[#00a0d1], text-[#091133], shadow","â"],["Outline active","bg-transparent, border-[#cff3ff], inset shadow","â"],["Ghost default","bg-transparent, border-[#4b57a5], text-[#4b57a5]","â"],["Ghost hover","border-[#202152], text-[#091133], shadow","â"],["Ghost active","border-[#cff3ff], text-[#091133], inset shadow","â"],["Disabled","border-[#cff3ff], cursor-not-allowed","both variants"]]}),e.jsx(i,{links:[{label:"Homepage (paired CTAs)",href:"/"},{label:"Pricing",href:"/pricing"},{label:"Partners",href:"/company/partners"},{label:"Dev: Buttons",href:"/dev/buttons"}
1]})]}),e.jsxs(l,{id:"fluree-button-tertiary",title:"FlureeButton â Tertiary",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[600px]",children:["Lightweight navigation pills for TOC links, filter chips, context links, and in-page anchors. Uses ",e.jsx("strong",{children:"Gotham Narrow Medium (500)"})," instead of Gotham Black, with a translucent cyan background and subtle border. Shares the same pressed/active inset shadow as Secondary. ",e.jsx("strong",{children:"Restricted to sizes XXS, XS, and SM only"})," â tertiary buttons should never appear at MD, LG, or XL."]}),e.jsx(t,{label:"Size scale (XXS, XS, SM only)",wrap:!0,children:["xxs","xs","sm"].map(a=>e.jsx(d,{variant:"tertiary",size:a,children:a.toUpperCase()},a))}),e.jsxs(t,{label:"With icons",wrap:!0,children:[e.jsx(d,{variant:"tertiary",size:"sm",iconRight:e.jsx(F,{className:"size-3"}),children:"View in context"}),e.jsx(d,{variant:"tertiary",size:"sm",iconLeft:e.jsx(k,{className:"size-3"}),children:"Jump to section"}),e.jsx(d,{variant:"tertiary",size:"xs",iconRight:e.jsx(F,{className:"size-3"}),children:"Platform"})]}),e.jsxs(t,{label:"States",wrap:!0,children:[e.jsx(d,{variant:"tertiary",size:"sm",children:"Default"}),e.jsx("div",{className:"rounded-full border-[1.25px] border-[#13c6ff] bg-[rgba(19,198,255,0.2)] px-[16px] pt-[8px] pb-[9px] inline-flex items-center font-gotham-narrow font-[500] text-[14px] text-[#091133]",children:"Hover (simulated)"}),e.jsx(d,{variant:"tertiary",size:"sm",disabled:!0,children:"Disabled"})]}),e.jsx(t,{label:"Use case: context links",wrap:!0,children:e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx("span",{className:"font-gotham-narrow font-[500] text-[12px] text-[#202152] uppercase tracking-[0.1em] self-center",children:"View in context:"}),e.jsx(d,{variant:"tertiary",size:"xs",iconRight:e.jsx(F,{className:"size-3"}),children:"Homepage"}),e.jsx(d,{variant:"tertiary",size:"xs",iconRight:e.jsx(F,{className:"size-3"}),children:"Platform"}),e.jsx(d,{variant:"tertiary",size:"xs",iconRight:e.jsx(F,{className:"size-3"}),children:"Pricing"})]})}),e.jsx(t,{label:"Use case: TOC navigation",children:e.jsx("div",{className:"flex flex-wrap gap-2",children:["FlureeButton","FlureeInput","Accordion","Badge","Tabs"].map(a=>e.jsx(d,{variant:"tertiary",size:"xs",children:a},a))})}),e.jsx(n,{rows:[["variant",'"tertiary"',"â"],["size",'"xxs" | "xs" | "sm" only','"sm"'],["font","Gotham Narrow Medium (500)","overrides Gotham Black"],["bg (default)","rgba(207,243,255,0.3)","translucent cyan"],["border (default)","rgba(19,198,255,0.4)","soft cyan"],["hover","bg rgba(19,198,255,0.2), border #13c6ff","â"],["active/pressed","bg-transparent, border-[#cff3ff], inset shadow","matches Secondary"],["disabled","bg rgba(207,243,255,0.15), text rgba(9,17,51,0.33)","â"]]}),e.jsx(i,{links:[{label:"Component Library TOC",href:"/dev/components"},{label:"Resources (filter pills)",href:"/resources"},{label:"Blog (category pills)",href:"/blog"}]})]}),e.jsxs(l,{id:"fluree-input",title:"FlureeInput",children:[e.jsxs(t,{label:"Default + Small",children:[e.jsx("div",{className:"w-[320px]",children:e.jsx(I,{placeholder:"Default (md)"})}),e.jsx("div",{className:"w-[240px]",children:e.jsx(I,{size:"sm",placeholder:"Small (sm)"})})]}),e.jsxs(t,{label:"States",children:[e.jsx("div",{className:"w-[320px]",children:e.jsx(I,{state:"error",defaultValue:"bad@",helperText:"Valid email required"})}),e.jsx("div",{className:"w-[320px]",children:e.jsx(I,{state:"success",defaultValue:"[email protected]",helperText:"Looks good!"})}),e.jsx("div",{className:"w-[320px]",children:e.jsx(I,{disabled:!0,placeholder:"Disabled"})})]}),e.jsx(t,{label:"Validation banners",children:e.jsx("div",{className:"w-[420px]",children:e.jsx(I,{state:"error",defaultValue:"name@bad",validationMessage:{heading:"Oh Snap!",body:"We need a valid email. Please try [email protected]."}})})}),e.jsx(n,{rows:[["size",'"md" | "sm"','"md"'],["state",'"default" | "error" | "success"','"default"'],["helperText","string","â"],["validationMessage","{ heading, body }
1","â"],["disabled","boolean","false"]]}),e.jsx(i,{links:[{label:"Footer",href:"/"},{label:"Pricing Form",href:"/pricing"},{label:"Partners",href:"/company/partners"},{label:"Dev: Inputs",href:"/dev/inputs"}]})]}),e.jsxs(l,{id:"fluree-textarea",title:"FlureeTextarea",children:[e.jsxs(t,{label:"Default + Error",children:[e.jsx("div",{className:"w-[360px]",children:e.jsx(he,{placeholder:"Tell us about your use case...",rows:3})}),e.jsx("div",{className:"w-[360px]",children:e.jsx(he,{state:"error",defaultValue:"Too short",helperText:"Must be at least 20 characters."})})]}),e.jsx(n,{rows:[["state",'"default" | "error" | "success"','"default"'],["helperText","string","â"],["validationMessage","{ heading, body }","â"],["rows","number","3"],["disabled","boolean","false"]]}),e.jsx(i,{links:[{label:"Pricing Form",href:"/pricing"},{label:"Partners",href:"/company/partners"}]})]}),e.jsxs(l,{id:"fluree-select",title:"FlureeSelect",children:[e.jsxs(t,{label:"Default + Error",children:[e.jsx("div",{className:"w-[320px]",children:e.jsxs(ue,{defaultValue:"",children:[e.jsx("option",{value:"",disabled:!0,children:"Select your role..."}),e.jsx("option",{children:"C-Suite / VP"}),e.jsx("option",{children:"Engineering"}),e.jsx("option",{children:"Product"})]})}),e.jsx("div",{className:"w-[320px]",children:e.jsxs(ue,{state:"error",defaultValue:"",helperText:"Please select a role",children:[e.jsx("option",{value:"",disabled:!0,children:"Select your role..."}),e.jsx("option",{children:"Engineering"})]})})]}),e.jsx(n,{rows:[["state",'"default" | "error" | "success"','"default"'],["helperText","string","â"],["disabled","boolean","false"],["children","<option> elements","â"]]}),e.jsx(i,{links:[{label:"Pricing Form",href:"/pricing"}]})]}),e.jsxs(l,{id:"fluree-label",title:"FlureeLabel",children:[e.jsxs(t,{label:"Variants",wrap:!0,children:[e.jsx(_,{children:"Form Label"}),e.jsx(_,{required:!0,children:"Required Label"}),e.jsx(_,{variant:"group-heading",children:"Group Heading"}),e.jsx(_,{disabled:!0,children:"Disabled Label"})]}),e.jsx(n,{rows:[["variant",'"label" | "group-heading"','"label"'],["required","boolean","false"],["disabled","boolean","false"],["htmlFor","string","â"]]}),e.jsx(i,{links:[{label:"Pricing Form",href:"/pricing"},{label:"Partners",href:"/company/partners"}]})]}),e.jsxs(l,{id:"fluree-checkbox",title:"FlureeCheckbox",children:[e.jsxs(t,{label:"Sizes + states",wrap:!0,children:[["lg","md","sm"].map(a=>e.jsxs("label",{className:"flex items-center gap-2 cursor-pointer",children:[e.jsx(me,{size:a,checked:r[`cb-${a}`]||!1,onCheckedChange:()=>Ke(`cb-${a}`)}),e.jsx("span",{className:"font-gotham-narrow text-[14px] text-[#091133]",children:a.toUpperCase()})]},a)),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(me,{checked:!0,disabled:!0}),e.jsx("span",{className:"font-gotham-narrow text-[14px] text-[rgba(9,17,51,0.33)]",children:"Disabled"})]})]}),e.jsx(n,{rows:[["size",'"lg" | "md" | "sm"','"md"'],["checked","boolean","false"],["disabled","boolean","false"],["onCheckedChange","(checked) => void","â"]]}),e.jsx(i,{links:[{label:"Partners (category)",href:"/company/partners"},{label:"Dev: Inputs",href:"/dev/inputs"}]})]}),e.jsxs(l,{id:"fluree-radio",title:"FlureeRadioGroup / FlureeRadioItem",children:[e.jsx(t,{label:"Interactive group",wrap:!0,children:e.jsxs(rt,{value:o,onValueChange:f,className:"flex gap-4",children:[["Option A","Option B","Option C"].map(a=>e.jsxs("label",{className:"flex items-center gap-2 cursor-pointer",children:[e.jsx(be,{value:a,size:"md"}),e.jsx("span",{className:"font-gotham-narrow text-[14px] text-[#091133]",children:a})]},a)),e.jsxs("label",{className:"flex items-center gap-2",children:[e.jsx(be,{value:"d",size:"md",disabled:!0}),e.jsx("span",{className:"font-gotham-narrow text-[14px] text-[rgba(9,17,51,0.33)]",children:"Disabled"})]})]})}),e.jsx(n,{rows:[["FlureeRadioGroup: value","string","â"],["FlureeRadioGroup: onValueChange","(val) => void","â"],["FlureeRadioItem: size",'"lg" | "md" | "sm"','"md"'],["FlureeRadioItem: value","string (required)","â"],["FlureeRadioItem: disabled","boolean","fal
1se"]]}),e.jsx(i,{links:[{label:"Partners",href:"/company/partners"},{label:"Dev: Inputs",href:"/dev/inputs"}]})]}),e.jsxs(l,{id:"badge",title:"Badge",children:[e.jsxs(t,{label:"All variants",wrap:!0,children:[e.jsx($,{variant:"default",children:"Default"}),e.jsx($,{variant:"secondary",children:"Secondary"}),e.jsx($,{variant:"destructive",children:"Destructive"}),e.jsx($,{variant:"outline",children:"Outline"})]}),e.jsx(n,{rows:[["variant",'"default" | "secondary" | "destructive" | "outline"','"default"']]}),e.jsx(i,{links:[{label:"Fluree Core",href:"/platform/core"},{label:"Fluree Sense",href:"/platform/sense"},{label:"Fluree CAM",href:"/platform/cam"}]})]}),e.jsxs(l,{id:"button-shadcn",title:"Button (shadcn)",children:[e.jsxs("p",{className:"mb-4 font-gotham-narrow text-[14px] text-[#d03801] bg-[#fde8e8] rounded-[8px] p-3 inline-block",children:[e.jsx("strong",{children:"Note:"})," Mostly replaced by FlureeButton. Retained for internal ui dependencies (carousel, pagination)."]}),e.jsxs(t,{label:"Variants",wrap:!0,children:[e.jsx(A,{variant:"default",children:"Default"}),e.jsx(A,{variant:"outline",children:"Outline"}),e.jsx(A,{variant:"secondary",children:"Secondary"}),e.jsx(A,{variant:"ghost",children:"Ghost"}),e.jsx(A,{variant:"link",children:"Link"}),e.jsx(A,{variant:"destructive",children:"Destructive"})]}),e.jsx(n,{rows:[["variant",'"default" | "outline" | "secondary" | "ghost" | "link" | "destructive"','"default"'],["size",'"default" | "sm" | "lg" | "icon"','"default"'],["asChild","boolean","false"]]}),e.jsx(i,{links:[{label:"Case Studies",href:"/case-studies"}]})]}),e.jsxs(l,{id:"separator",title:"Separator",children:[e.jsxs(t,{label:"Horizontal + Vertical",children:[e.jsxs("div",{className:"w-[300px]",children:[e.jsx("p",{className:"text-sm text-muted-foreground mb-2",children:"Above"}),e.jsx(pe,{}),e.jsx("p",{className:"text-sm text-muted-foreground mt-2",children:"Below"})]}),e.jsxs("div",{className:"flex items-center h-[60px] gap-4",children:[e.jsx("span",{className:"text-sm",children:"Left"}),e.jsx(pe,{orientation:"vertical"}),e.jsx("span",{className:"text-sm",children:"Right"})]})]}),e.jsx(n,{rows:[["orientation",'"horizontal" | "vertical"','"horizontal"'],["decorative","boolean","true"]]}),e.jsx(i,{links:[{label:"GraphRAG",href:"/solutions/graph-rag"}]})]}),e.jsxs(l,{id:"section-label",title:"SectionLabel",children:[e.jsxs(t,{label:"Default + dark variant",children:[e.jsx("div",{className:"w-full max-w-[400px]",children:e.jsx(ge,{label:"Example Label"})}),e.jsx("div",{className:"w-full max-w-[400px] bg-[#091133] rounded-[8px] p-6",children:e.jsx(ge,{label:"Dark Variant",dark:!0})})]}),e.jsx(n,{rows:[["label","string (required)","â"],["dark","boolean","false"],["className","string",'""']]}),e.jsx(i,{links:[{label:"Homepage",href:"/"},{label:"Platform",href:"/platform"},{label:"All solution pages",href:"/solutions/graph-rag"}]})]}),e.jsxs(l,{id:"solid-section-label",title:"SolidSectionLabel",children:[e.jsxs(t,{label:"Color variants",wrap:!0,children:[e.jsx(N,{label:"Solid Section Label",variant:"lilac"}),e.jsx(N,{label:"Solid Section Label",variant:"plum"}),e.jsx(N,{label:"Solid Section Label",variant:"vibrant"}),e.jsx(N,{label:"Solid Section Label",variant:"ember"}),e.jsx(N,{label:"Solid Section Label",variant:"violet"}),e.jsx(N,{label:"Solid Section Label",variant:"ice"})]}),e.jsx(n,{rows:[["label","string (required)","â"],["variant",'"lilac" | "plum" | "vibrant" | "ember" | "violet" | "ice"','"lilac"'],["className","string","â"]]})]}),e.jsxs(l,{id:"avatar",title:"Avatar / Initials Circle",children:[e.jsxs(t,{label:"Sizes + contexts",wrap:!0,children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center",children:e.jsx("span",{className:"text-sm font-bold text-accent",children:"BP"})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium text-foreground",children:"Brian Platz"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Fluree"})]})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center",children:e.jsx("span",{className:"text-sm font-bold text-accent",children:"AR"})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium text-foreground",children:"Alex Rivera"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Fluree"})]})]})]}),e.jsx(t,{label:"Small (webinar speakers)",wrap:!0,children:["SC","BP","AR"].map(a=>e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center",children:e.jsx("span",{className:"text-[10px] font-bold text-accent",children:a})}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"Speaker"})]},a))}),e.jsx(n,{rows:[["size","w-10 h-10 (article) / w-6 h-6 (inline)","context-dependent"],["bg","bg-accent/10","â"],["initials","First letter(s) of name","text-sm or text-[10px]"],["font","font-bold text-accent","â"]]}),e.jsx(i,{links:[{label:"Blog Post (author)",href:"/blog"},{label:"Resources (speakers)",href:"/resources"},{label:"Video Detail",href:"/resources/videos/fluree-solo-demo"}]})]}),e.jsxs(l,{id:"tags",title:"Tags",children:[e.jsx(t,{label:"Article / video tags",wrap:!0,children:["Enterprise AI","Knowledge Graphs","GraphRAG","Semantic Layer"].map(a=>e.jsx("span",{className:"px-3 py-1 rounded-full text-xs font-medium bg-muted text-muted-foreground",children:a},a))}),e.jsx(t,{label:"Metric pills (case studies)",wrap:!0,children:["6M+ records unified","30+ years consolidated","97.5% accuracy"].map(a=>e.jsx("span",{className:"px-2.5 py-1 rounded-full text-[10px] font-medium bg-accent/10 text-fluree-deep",children:a},a))}),e.jsx(n,{rows:[["Article tag","rounded-full, bg-muted, text-xs, px-3 py-1","Blog, Video detail"],["Metric pill","rounded-full, bg-accent/10, text-[10px], text-fluree-deep â dark text on pale-cyan for WCAG contrast","Case studies, Index"]]}),e.jsx(i,{links:[{label:"Blog Post",href:"/blog"},{label:"Case Studies",href:"/case-studies"}]})]}),e.jsxs(l,{id:"status-badges",title:"Status Badges",children:[e.jsxs(t,{label:"Webinar status",wrap:!0,children:[e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-success",children:"Upcoming"}),e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:"On-Demand"})]}),e.jsxs(t,{label:"Type labels (resource cards)",wrap:!0,children:[e.jsxs("span",{className:"inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:[e.jsx(E,{className:"w-3 h-3"})," Whitepaper"]}),e.jsxs("span",{className:"inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:[e.jsx(Re,{className:"w-3 h-3"})," Case Study"]}),e.jsxs("span",{className:"inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:[e.jsx(ae,{className:"w-3.5 h-3.5"})," Demo"]})]}),e.jsxs(t,{label:"Eyebrow / category labels",wrap:!0,children:[e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:"Enterprise AI"}),e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-muted-foreground",children:"Financial Services"})]}),e.jsx(n,{rows:[["Webinar status","text-[10px] font-mono uppercase tracking-widest","green-500 or accent"],["Type label","icon + text, text-[10px] font-mono uppercase","text-accent"],["Category eyebrow","text-[10px] font-mono uppercase tracking-widest","text-fluree-purple or muted"]]}),e.jsx(i,{links:[{label:"Resources",href:"/resources"},{label:"Blog",href:"/blog"}]})]}),e.jsxs(l,{id:"reading-progress",title:"Reading Progress Bar",children:[e.jsx(t,{label:"Fixed top bar (blog posts)",children:e.jsx("div",{className:"w-full max-w-[500px] relative h-[3px] bg-border rounded overflow-hidden",children:e.jsx("div",{className:"h-full bg-accent",style:{width:"65%"}})})}),e.jsx(n,{rows:[["container","fixed top-0 left-0 right-0 z-[60] h-[3px]","â"],["bar","h-full bg-accent transition-[width] duration-100","â"],["calculation","(scrolled / (total - visible)) * 100","blog-body element"]]}),e.jsx(i,{links:[{label:"Blog Post",href:"/blog"}]})]}),e.jsx(P,{label:"Molecules",color:"text-[#4b57a5]"}),e.jsxs(l,{id:"accordion",title:"Accordion",children:[e.jsx(t,{label:"Single collapsible",children:e.jsx("div",{className:"w-full max-w-[500px] rounded-[8px] border border-border p-4",children:e.jsxs(ht,{type:"single",defaultValue:"item-1",collapsible:!0,children:[e.jsxs(Z,{value:"item-1",children:[e.jsx(ee,{children:"What is Fluree?"}),e.jsx(te,{children:"Fluree is the enterprise AI data platform that turns your organizationâs data into trusted, structured knowledge."})]}),e.jsxs(Z,{value:"item-2",children:[e.jsx(ee,{children:"How does GraphRAG work?"}),e.jsx(te,{children:"GraphRAG combines knowledge graph structure with retrieval-augmented generation to provide verified, source-traced AI answers."})]}),e.jsxs(Z,{value:"item-3",children:[e.jsx(ee,{children:"Is there a free tier?"}),e.jsx(te,{children:"Yes â Fluree Solo is free for individual developers and small teams to get started."})]})]})})}),e.jsx(n,{rows:[["Accordion: type",'"single" | "multiple"','"single"'],["Accordion: collapsible","boolean","fal
1se"],["Accordion: defaultValue","string","â"],["AccordionItem: value","string (required)","â"],["AccordionTrigger: children","ReactNode","â"],["AccordionContent: children","ReactNode","â"]]}),e.jsx(i,{links:[{label:"Solo",href:"/solo"},{label:"Core Banking AI",href:"/solutions/financial/core-banking-ai"},{label:"GraphRAG",href:"/solutions/graph-rag"},{label:"Regulatory Intel",href:"/solutions/pharma/regulatory-intelligence"}]})]}),e.jsxs(l,{id:"card",title:"Card",children:[e.jsx(t,{label:"Compound component",children:e.jsxs(We,{className:"w-[350px]",children:[e.jsxs(He,{children:[e.jsx($e,{children:"Card Title"}),e.jsx(Ue,{children:"Card description text goes here."})]}),e.jsx(Xe,{children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Card body content with glass morphism styling."})}),e.jsx(Ye,{children:e.jsx(d,{size:"sm",children:"Action"})})]})}),e.jsx(n,{rows:[["Card","div wrapper","glass bg + border + blur"],["CardHeader","flex col, p-6","â"],["CardTitle","text-2xl semibold","â"],["CardDescription","text-sm muted","â"],["CardContent","p-6 pt-0","â"],["CardFooter","flex, p-6 pt-0","â"]]}),e.jsx(i,{links:[{label:"Core Banking AI",href:"/solutions/financial/core-banking-ai"}]})]}),e.jsxs(l,{id:"feature-focus-menu",title:"FeatureFocusMenu",children:[e.jsx(t,{label:"Single-card layout (1 card · full anatomy)",children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"Selected Case Studies",heading:e.jsxs(e.Fragment,{children:["Real results across ",e.jsx("br",{className:"hidden md:block"}),"industries we serve."]}),menuFooterCta:{label:"Browse all Case Studies",href:"#"},items:[{key:"decision",menuLabel:"Decision Intelligence",content:e.jsx(g.SingleCard,{eyebrow:{useCase:"USE CASE",industry:"Financial Services"},stat:{value:"10,000+",label:"documents extracted"},title:"Driving Just-in-Time Decision Intelligence",body:"A financial services leader used Fluree to automate tagging, improve discovery, and grow a data portal into a more trusted intelligence destination.",quote:{text:"By integrating Fluree into its content supply chain, the client eliminated error-prone tagging, expanded its knowledge base tenfold, and regained the trust of portal users consuming the data.",attribution:"Financial Services Data Portal Case Study"},cta:{label:"Read the Case Study",href:"#"}})},{key:"regulatory",menuLabel:"Regulatory Intelligence",content:e.jsx(g.SingleCard,{eyebrow:{useCase:"USE CASE",industry:"Pharmaceutical"},stat:{value:"3 weeks",label:"new use cases live"},title:"Making Pharma Data AI-Ready in Weeks",body:"A North American pharmaceutical company used Fluree Sense to consolidate more than 10 warehouses, cut manual data remediation costs by $3M, and reduce new analytics use cases from 9 months to 3 weeks.",cta:{label:"Read the Case Study",href:"#"}})},{key:"customer",menuLabel:"Customer Intelligence",content:e.jsx(g.SingleCard,{eyebrow:{useCase:"USE CASE",industry:"Banking"},title:"Turning Customer Records into Proactive Outreach",body:"A community bank with 113 branches unified fragmented customer records into a single golden-record foundation, enabling proactive customer outreach and master data management at scale.",cta:{label:"Read the Case Study",href:"#"}})},{key:"ai-infra",menuLabel:"AI Infrastructure",content:e.jsx(g.SingleCard,{eyebrow:{useCase:"USE CASE",industry:"Beauty & Cosmetics"},title:"Building a Data Agent Factory",body:"A global beauty brand designed a comprehensive AI Agent Factory â a repeatable operating model for creating, governing, and deploying Knowledge Agents at scale.",cta:{label:"Read the Case Study",href:"#"}})}]})})}),e.jsx(n,{rows:[["FeatureFocusMenu","compound","side menu drives feature card area · 300ms cross-fade on click"],["sectionLabel","string","section eyebrow (renders as SolidSectionLabel vibrant)"],["heading","ReactNode","section H2"],["items[]","{ key, menuLabel, content }","menu entry + matching feature content"],["menuFooterCta","{ label, href }?","fixed visual anchor at end of menu â label is page-specific"],["FeatureFocusMenu.SingleCard","rich layout","eyebrow · illustration · optional stat · title · body · optional quote · cta"],["FeatureFocusMenu.LeanCard","compact card","eyebrow · icon · title · body · cta"],["FeatureFocusMenu.LeanCardRow","wraps 2-3 LeanCards","use as item.content for dual or triple layouts"],["MenuItem hover","no shape change","300ms vibrant-blue left border fade-in · text Book â Medium"],["MenuItem active","no fade","violet (Fluree Brand) left border · text Bold"]]})]}),e.jsxs(l,{id:"icon-circle",title:"IconCircle",children:[e.jsxs(t,{label:"Size scale (xs · sm · md · lg · xl · 2xl)",wrap:!0,children:[e.jsx(j,{size:"xs",children:e.jsx(L,{className:"h-4 w-4"})}),e.jsx(j,{size:"sm",children:e.jsx(L,{className:"h-5 w-5"})}),e.jsx(j,{size:"md",children:e.jsx(L,{className:"h-6 w-6"})}),e.jsx(j,{size:"lg",children:e.jsx(L,{className:"h-7 w-7"})}),e.jsx(j,{size:"xl",children:e.jsx(L,{className:"h-8 w-8"})}),e.jsx(j,{size:"2xl",children:e.jsx(L,{className:"h-10 w-10"})})]}),e.jsxs(t,{label:"Various Heroicons (gradient applied)",wrap:!0,children:[e.jsx(j,{children:e.jsx(Ie,{className:"h-6 w-6"})}),e.jsx(j,{children:e.jsx(Le,{className:"h-6 w-6"})}),e.jsx(j,{children:e.jsx(Rt,{className:"h-6 w-6"})}),e.jsx(j,{children:e.jsx(It,{className:"h-6 w-6"})}),e.jsx(j,{children:e.jsx(Q,{className:"h-6 w-6"})})]}),e.jsx(n,{rows:[["IconCircle","span wrapper","white fill · rounded-full · soft ambient shadow (Figma 425:1608)"],["size","xs · sm · md · lg · xl · 2xl","default md (h-14 w-14 · 56px)"],["noGradient","boolean","skip the violet â vibrant fill (default false)"],["children","Heroicons / SVG glyph","icon paths fill via .fluree-icon-gradient"]]})]}),e.jsxs(l,{id:"icon-card",title:"IconCard",children:[e.jsxs(t,{label:"Canonical icon-led card (icon · title · body · ghost CTA)",wrap:!0,children:[e.jsxs(oe,{className:"w-[340px]",children:[e.jsx(ie,{children:e.jsx(Ie,{className:"h-6 w-6"})}),e.jsx(de,{children:"Documentation"}),e.jsx(ce,{children:"Platform docs, API reference, quickstarts â deep-linked so Claude can cite them directly."}),e.jsx(xe,{children:e.jsx(d,{asChild:!0,variant:"ghost",size:"xxs",iconRight:e.jsx(Q,{}),children:e.jsx("a",{href:"#",children:"Open docs"})})})]}),e.jsxs(oe,{className:"w-[340px]",children:[e.jsx(ie,{children:e.jsx(Le,{className:"h-6 w-6"})}),e.jsx(de,{children:"2026 Benchmark Results"}),e.jsx(ce,{children:"Fluree is the fastest read-write knowledge graph across the SPARQLoscope benchmark suite."}),e.jsx(xe,{children:e.jsx(d,{asChild:!0,variant:"ghost",size:"xxs",iconRight:e.jsx(Q,{}),children:e.jsx("a",{href:"#",children:"Read the report"})})})]})]}),e.jsx(n,{rows:[["IconCard","div wrapper","white card · rounded-2xl · soft shadow · subtle lift on hover"],["IconCardIcon","circle, h-12 w-12, rounded-full bg-fluree-cyan-soft","applies .fluree-icon-gradient â child icon paths fill with violet â vibrant gradient"],["IconCardTitle","h3, text-xl extrabold tracking-tight","â"],["IconCardDescription","p, text-sm muted leading-relaxed","â"],["IconCardAction","mt-5 wrapper for CTA",'must use FlureeButton variant="ghost" size="xxs"']]})]}),e.jsxs(l,{id:"illustrative-card",title:"IllustrativeCard",children:[e.jsx(t,{label:"Compound component (image + label + title + body + CTA)",children:e.jsxs(bt,{className:"w-[420px]",children:[e.jsx(gt,{alt:"Block illustration placeholder"}),e.jsxs(ft,{children:[e.jsx(N,{label:"Solid Section Label",variant:"plum"}),e.jsx(jt,{children:"Card Header Style"}),e.jsx(wt,{children:"Lorem ipsum dolor sit amet consectetur. Quam nibh mauris nisi ut. Eget purus libero duis augue urna blandit pellentesque. Ipsum faucibus diam ut senectus ut ultrices."}),e.jsx(vt,{children:e.jsx(d,{variant:"primary",theme:"purple",size:"xl",children:"CTA Button"})})]})]})}),e.jsx(n,{rows:[["IllustrativeCard","div wrapper","whiteâfade gradient + rounded-2xl"],["IllustrativeCardImage","img w/ container","src defaults to /graphic/card-block-placeholder.png"],["IllustrativeCardBody","flex col, px-12 py-8, gap-5","â"],["IllustrativeCardTitle","h3, Gotham Black 36/40","â"],["IllustrativeCardDescription","p, Gotham Narrow 18/28","â"],["IllustrativeCardAction","CTA slot","â"]]})]}),e.jsxs(l,{id:"dialog",title:"Dialog",children:[e.jsx(t,{label:"Interactive demo",children:e.jsxs(yt,{children:[e.jsx(Nt,{asChild:!0,children:e.jsx(d,{variant:"outline",size:"sm",children:"Open Dialog"})}),e.jsxs(kt,{className:"sm:max-w-md",children:[e.jsxs(Ct,{children:[e.jsx(St,{children:"Dialog Title"}),e.jsx(Ft,{children:"This is the dialog description. It supports any content inside."})]}),e.jsx("div",{className:"py-4",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Dialog body content goes here."})})]})]})}),e.jsx(n,{rows:[["Dialog: open","boolean","â"],["Dialog: onOpenChange","(open) =>
1 void","â"],["DialogTrigger: asChild","boolean","false"],["DialogContent: className","string","max-w-lg"],["DialogTitle","ReactNode","â"],["DialogDescription","ReactNode","â"]]}),e.jsx(i,{links:[{label:"Connectors (modal)",href:"/platform/connectors"},{label:"Demo Request (site-wide)",href:"/pricing"}]})]}),e.jsxs(l,{id:"tabs",title:"Tabs",children:[e.jsx(t,{label:"Interactive demo",children:e.jsx("div",{className:"w-full max-w-[500px]",children:e.jsxs(Wt,{defaultValue:"tab1",children:[e.jsxs(Je,{className:"w-full",children:[e.jsx(X,{value:"tab1",className:"flex-1",children:"Overview"}),e.jsx(X,{value:"tab2",className:"flex-1",children:"Features"}),e.jsx(X,{value:"tab3",className:"flex-1",children:"Pricing"})]}),e.jsx(Y,{value:"tab1",className:"rounded-[8px] border border-border p-4 mt-3",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Overview tab content. Tabs are used heavily across solution and product pages."})}),e.jsx(Y,{value:"tab2",className:"rounded-[8px] border border-border p-4 mt-3",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Features tab content."})}),e.jsx(Y,{value:"tab3",className:"rounded-[8px] border border-border p-4 mt-3",children:e.jsx("p",{className:"text-sm text-muted-foreground",children:"Pricing tab content."})})]})})}),e.jsx(n,{rows:[["Tabs: defaultValue","string","â"],["TabsList: className","string","inline-flex muted bg"],["TabsTrigger: value","string (required)","â"],["TabsContent: value","string (required)","â"]]}),e.jsx(i,{links:[{label:"Fluree AI",href:"/fluree-ai"},{label:"Conversational Analytics",href:"/solutions/conversational-analytics"},{label:"Fluree Core",href:"/platform/core"}]})]}),e.jsxs(l,{id:"toast",title:"Toast",children:[e.jsxs(t,{label:"Trigger demos",wrap:!0,children:[e.jsx(d,{size:"sm",onClick:()=>w({title:"Success!",description:"Your action completed."}),children:"Default Toast"}),e.jsx(d,{size:"sm",theme:"purple",onClick:()=>w({title:"Error",description:"Something went wrong.",variant:"destructive"}),children:"Destructive Toast"})]}),e.jsx(n,{rows:[["title","string","â"],["description","string","â"],["variant",'"default" | "destructive"','"default"'],["action","ToastAction ReactNode","â"]]}),e.jsx(i,{links:[{label:"Demo Request Modal",href:"/pricing"},{label:"Newsletter Signup",href:"/"}]})]}),e.jsxs(l,{id:"tooltip",title:"Tooltip",children:[e.jsx(t,{label:"Interactive demo",children:e.jsx(st,{delayDuration:200,children:e.jsxs(nt,{children:[e.jsx(lt,{asChild:!0,children:e.jsx(d,{variant:"outline",size:"sm",iconLeft:e.jsx(Lt,{}),children:"Hover me"})}),e.jsx(ot,{children:e.jsx("p",{children:"This is a tooltip with helpful context."})})]})})}),e.jsx(n,{rows:[["TooltipProvider: delayDuration","number (ms)","700"],["TooltipContent: side",'"top" | "bottom" | "left" | "right"','"top"'],["TooltipContent: sideOffset","number (px)","4"]]}),e.jsx(i,{links:[{label:"Enterprise Subnav",href:"/platform"}]})]}),e.jsxs(l,{id:"scroll-reveal",title:"ScrollReveal",children:[e.jsx(t,{label:"Fade-up on scroll (scroll down to trigger)",children:e.jsxs("div",{className:"w-full max-w-[400px]",children:[e.jsx(fe,{children:e.jsx("div",{className:"rounded-[8px] border border-border p-6 text-center",children:e.jsx("p",{className:"font-gotham-narrow text-[14px] text-[#091133]",children:"This content fades in when it enters the viewport."})})}),e.jsx(fe,{delay:200,children:e.jsx("div",{className:"rounded-[8px] border border-border p-6 text-center mt-3",children:e.jsx("p",{className:"font-gotham-narrow text-[14px] text-[#091133]",children:"This one has a 200ms delay."})})})]})}),e.jsx(n,{rows:[["children","ReactNode (required)","â"],["delay","number (ms)","0"],["className","string",'""']]}),e.jsx(i,{links:[{label:"Used on every page",href:"/"}]})]}),e.jsxs(l,{id:"newsletter-signup",title:"NewsletterSignup",children:[e.jsx(t,{label:"Compact variant (footer)",children:e.jsx("div",{className:"w-[300px]",children:e.jsx(je,{variant:"compact"})})}),e.jsx(t,{label:"Inline variant (content sections)",children:e.jsx("div",{className:"w-full max-w-[500px]",children:e.jsx(je,{variant:"inline"})})}),e.jsx(n,{rows:[["variant",'"inline" | "compact"','"inline"']]}),e.jsx(i,{links:[{label:"Footer (compact)",href:"/"},{label:"Blog (inline)",href:"/blog"}]})]}),e.jsxs(l,{id:"filter-pills",title:"Filter Pills / Chips",children:[e.jsx(t,{label:"Tab-style filters (Resources page)",wrap:!0,children:[{icon:we,label:"All Resources",active:!0},{icon:E,label:"Blog",active:!1},{icon:ae,label:"Videos",active:!1},{icon:Bt,label:"Webinars",active:!1},{icon:Pt,label:"Downloads",active:!1}].map(a=>e.jsxs("button",{className:`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${a.active?"bg-accent text-accent-foreground shadow-sm":"text-muted-foreground hover:text-foreground hover:bg-muted"}`,children:[e.jsx(a.icon,{className:"w-3.5 h-3.5"}),a.label]},a.label))}),e.jsx(t,{label:"Topic filter pills",wrap:!0,children:["All","Enterprise AI","Knowledge Graphs","GraphRAG","Data Governance"].map((a,v)=>e.jsx("button",{className:`px-3 py-1 rounded-full text-[11px] font-medium border transition-colors whitespace-nowrap ${v===0?"bg-accent text-accent-foreground border-accent":"border-border text-muted-foreground hover:text-foreground hover:border-foreground
1/30"}`,children:a},a))}),e.jsx(t,{label:"Blog category pills (larger)",wrap:!0,children:["All","Enterprise AI","GraphRAG","Product"].map((a,v)=>e.jsx("button",{className:`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${v===0?"bg-accent text-accent-foreground":"bg-card border border-border text-muted-foreground hover:text-foreground"}`,children:a},a))}),e.jsx(n,{rows:[["Tab filter","icon + label, rounded-lg, px-3 py-1.5, text-xs","Resources page"],["Topic pill","rounded-full, px-3 py-1, text-[11px], border","Resources page"],["Category pill","rounded-full, px-4 py-1.5, text-sm","Blog page"],["Active state","bg-accent text-accent-foreground","â"],["Inactive state","border-border text-muted-foreground","â"]]}),e.jsx(i,{links:[{label:"Resources",href:"/resources"},{label:"Blog",href:"/blog"}]})]}),e.jsxs(l,{id:"author-byline",title:"Author Byline",children:[e.jsx(t,{label:"Article header (avatar + name + org) â links to /blog/author/:slug when the author has a profile",children:e.jsxs("a",{href:"/blog/author/brian-platz",className:"group/byline flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center",children:e.jsx("span",{className:"text-sm font-bold text-accent",children:"B"})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium text-foreground underline decoration-transparent underline-offset-4 transition-colors group-hover/byline:text-fluree-purple group-hover/byline:decoration-fluree-purple/50",children:"Brian Platz"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Co-founder & Co-CEO"})]})]})}),e.jsx(t,{label:"Metadata row (category + date + reading time)",children:e.jsxs("div",{className:"flex items-center gap-3 text-[10px]",children:[e.jsx("span",{className:"font-mono uppercase tracking-widest text-fluree-purple",children:"Enterprise AI"}),e.jsx("span",{className:"text-muted-foreground",children:"·"}),e.jsx("span",{className:"text-muted-foreground",children:"Apr 14, 2026"}),e.jsx("span",{className:"text-muted-foreground",children:"·"}),e.jsxs("span",{className:"flex items-center gap-1 text-muted-foreground",children:[e.jsx(re,{className:"w-3 h-3"})," 8 min read"]})]})}),e.jsx(t,{label:"Inline byline (card footer)",children:e.jsxs("div",{className:"flex items-center justify-between w-[300px]",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"Brian Platz"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"8 min"})]})}),e.jsx(n,{rows:[["Avatar","w-10 h-10 rounded-full bg-accent/10","initial letter"],["Author name","text-sm font-medium text-foreground","â"],["Organization","text-xs text-muted-foreground",'"Fluree"'],["Profile link","Link to /blog/author/:slug (authors.ts slug)","hover: purple + underline"],["Date","text-[10px] or text-sm text-muted-foreground","formatted"],["Reading time","Clock icon + text-[10px]","calculated"]]}),e.jsx(i,{links:[{label:"Blog Post",href:"/blog"},{label:"Resources",href:"/resources"}]})]}),e.jsxs(l,{id:"feature-list-item",title:"Feature List Item",children:[e.jsx(t,{label:"Check icon + text (pricing, features)",children:e.jsx("div",{className:"w-[300px] space-y-3",children:["Starter graph workspace","Natural language queries","Core connectors","Developer documentation"].map(a=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(_t,{className:"mt-0.5 h-4 w-4 text-accent shrink-0"}),e.jsx("span",{className:"text-sm text-foreground",children:a})]},a))})}),e.jsx(t,{label:"CheckCircle variant (case studies)",children:e.jsx("div",{className:"w-[300px] space-y-3",children:["Full data provenance","Time-travel queries","RBAC governance"].map(a=>e.jsxs("div",{className:"flex items-start gap-2.5",children:[e.jsx(it,{className:"mt-0.5 h-4 w-4 text-accent shrink-0"}),e.jsx("span",{className:"text-sm text-muted-foreground",children:a})]},a))})}),e.jsx(t,{label:"Numbered steps",children:e.jsx("div",{className:"w-[350px] space-y-4",children:["Connect your data sources","Build your knowledge graph","Query with natural language"].map((a,v)=>e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsxs("span",{className:"text-sm font-bold text-accent",children:["0",v+1]}),e.jsx("span",{className:"text-sm text-foreground",children:a})]},a))})}),e.jsx(n,{rows:[["Check variant","Check icon h-4 w-4 text-accent + text-sm","Pricing, features"],["CheckCircle variant","CheckCircle2 icon + text-sm text-muted","Case studies, templates"],["Numbered step","text-sm font-bold text-accent (01, 02...) + text","Accordions, processes"],["Layout","flex items-start gap-2 to gap-3","â"]]}),e.jsx(i,{links:[{label:"Pricing",href:"/pricing"},{label:"Solo",href:"/solo"},{label:"Case Studies",href:"/case-studies"}]})]}),e.jsxs(l,{id:"quote-block",title:"Quote / Testimonial Block",children:[e.jsx(t,{label:"Customer quote (template pattern)",children:e.jsxs("div",{className:"w-full max-w-[500px] rounded-[28px] bg-card px-8 py-10",children:[e.jsx("p",{className:"text-accent/20 text-[48px] leading-none mb-2",children:"â"}),e.jsx("blockquote",{className:"text-base italic text-muted-foreground leading-relaxed mb-4",children:"Fluree gave us provenance over every data point. For the first time, our AI answers are auditable and trusted."}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-semibold text-foreground",children:"Sarah Chen"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Chief Data Officer, Acme Corp"})]})]})}),e.jsx(n,{rows:[["container","rounded-[28px] bg-card px-8 py-10","â"],["quote mark","text-accent/20 text-[48px]","curly left double quote"],["blockquote","text-base italic text-muted-foreground","â"],["attribution name","text-sm font-semibold text-foreground","â"],["attribution title","text-xs text-muted-foreground","â"]]}),e.jsx(i,{links:[{label:"Solution pages",href:"/solutions/graph-rag"},{label:"Case studies",href:"/case-studies/financial-services-data-portal"}]})]}),e.jsxs(l,{id:"share-buttons",title:"Share Buttons",children:[e.jsx(t,{label:"Article share row",wrap:!0,children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-muted-foreground mr-1",children:"Share"}),["X (Twitter)","LinkedIn","Copy Link"].map(a=>e.jsx("button",{className:"p-1.5 rounded-lg hover:bg-muted transition-colors text-muted-foreground hover:text-foreground",children:e.jsx(zt,{className:"w-3.5 h-3.5"})},a))]})}),e.jsx(n,{rows:[["button","p-1.5 rounded-lg hover:bg-muted","â"],["icon","w-3.5 h-3.5 text-muted-foreground hover:text-foreground","â"],["label",'text-xs text-muted-foreground = "Share"',"â"],["actions","Twitter intent URL, LinkedIn share, navigator.clipboard","â"]]}),e.jsx(i,{links:[{label:"Blog Post",href:"/blog"}]})]}),e.jsxs(l,{id:"stat-metric",title:"Stat / Metric Display",children:[e.jsx(t,{label:"Large stat (case studies, stat band)",
1wrap:!0,children:[{value:"6M+",label:"Species Records Unified"},{value:"30+",label:"Years Consolidated"},{value:"97.5%",label:"Accuracy"}].map(a=>e.jsxs("div",{className:"text-center px-4",children:[e.jsx("p",{className:"text-3xl font-black text-accent",children:a.value}),e.jsx("p",{className:"text-[10px] font-mono uppercase tracking-widest text-muted-foreground mt-1",children:a.label})]},a.label))}),e.jsx(n,{rows:[["value","text-3xl font-black text-accent","â"],["label","text-[10px] font-mono uppercase tracking-widest text-muted-foreground","â"],["layout","text-center px-4, or flex row with dividers","â"]]}),e.jsx(i,{links:[{label:"Homepage (StatBand)",href:"/"},{label:"Case Studies",href:"/case-studies"}]})]}),e.jsxs(l,{id:"code-block",title:"Code Block",children:[e.jsx(t,{label:"Terminal-style code display",children:e.jsxs("div",{className:"w-full max-w-[450px] bg-[#091133]/[0.04] border border-border rounded-2xl overflow-hidden",children:[e.jsxs("div",{className:"flex items-center gap-2 px-4 py-3 border-b border-border/50",children:[e.jsx("span",{className:"w-2.5 h-2.5 rounded-full bg-fluree-error"}),e.jsx("span",{className:"w-2.5 h-2.5 rounded-full bg-fluree-warning"}),e.jsx("span",{className:"w-2.5 h-2.5 rounded-full bg-fluree-success"}),e.jsx("span",{className:"ml-2 text-[10px] text-muted-foreground font-mono",children:"mcp-config.json"})]}),e.jsx("pre",{className:"p-5 font-mono text-sm text-foreground overflow-x-auto scrollbar-hide",children:`{ 2 "mcpServers": { 3 "fluree": { 4 "command": "npx", 5 "args": ["-y", "@fluree/mcp-server"] 6 } 7 } 8}`})]})}),e.jsx(n,{rows:[["container","bg-[#091133]/[0.04] border border-border rounded-2xl","â"],["window chrome","3 colored dots (red, yellow, green) + filename","â"],["code content","font-mono text-sm text-foreground, pre tag","â"]]}),e.jsx(i,{links:[{label:"Platform (For Developers)",href:"/platform"}]})]}),e.jsx(P,{label:"Organisms",color:"text-[#202152]"}),e.jsxs(l,{id:"interactive-panel-group",title:"InteractivePanelGroup",children:[e.jsxs("div",{className:"mb-6 rounded-[8px] border border-dashed border-[rgba(122,91,255,0.45)] bg-[rgba(122,91,255,0.06)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"Template-level pattern"}),e.jsxs("p",{className:"font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:['The canonical "How it works" / "How we build" / "What you get" interactive-panel-row pattern from the homepage. A numbered row of panels (desktop) plus a swipe-driven carousel (mobile), each a Fluree-numeral badge + title + body + a scene card the consumer renders via render-prop. The component owns selection state, click-to-replay ',e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"playKey"}),", and a ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"hasInteracted"})," gate so scenes never autoplay."]})]}),e.jsxs("div",{className:"mb-6 rounded-[8px] border border-[rgba(122,91,255,0.4)] bg-[rgba(207,243,255,0.25)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"Interactivity affordance â violet glow"}),e.jsx("p",{className:"font-gotham-narrow text-[13px] leading-[20px] text-[#202152] mb-2",children:`On hover (desktop) or tap-active (mobile), every panel gets a Fluree-violet glow ring + violet-tinted border, and the matching numeral picks up a violet drop-shadow halo. Indicates that the panel is interactive â even the panel that's already selected gets the affordance to confirm "click to replay".`}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Panel ring"})," â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"box-shadow: 0 0 0 1px rgba(183,117,214,0.18), 0 18px 44px -12px rgba(183,117,214,0.45)"})]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Panel border"})," â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"border-fluree-violet/55"})]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Numeral halo"})," â base ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"drop-shadow(0_2px_6px_rgba(9,17,51,0.22))"})," + ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"drop-shadow(0_0_12px_rgba(183,117,214,0.55))"})]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Trigger"})," â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"group-hover:"})," on desktop (cards are ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"group/step"})," buttons) and ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"active:"})," on mobile (touch tap)"]})]})]}),e.jsxs("div",{className:"mb-6 rounded-[8px] border border-[rgba(19,198,255,0.4)] bg-[rgba(240,251,255,0.4)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"Desktop spec (sm and above)"}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠Three-up flex row; selected panel grows to ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"flex-[2.1_1_0]"}),", siblings to ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"flex-1 min-w-0"}),". 700 ms cubic-bezier transition."]}
8),e.jsxs("li",{children:["⢠Selected scene card â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"border-accent/35"})," + ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"shadow-fluree-xl"})," + opacity 1."]}),e.jsxs("li",{children:["⢠Unselected scene card â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"border-border"})," + ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"shadow-fluree-sm"})," + opacity .72; opacity lifts to .92 on group-hover."]}),e.jsxs("li",{children:["⢠Scene height â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"clamp(320px, 32vw, 440px)"})," so it scales with viewport."]}),e.jsxs("li",{children:["⢠Body row reserves ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"h-[5.25rem] md:h-[4.5rem]"})," so column heights donât jitter when a siblingâs caption opens/closes."]})]})]}),e.jsxs("div",{className:"mb-6 rounded-[8px] border border-[rgba(19,198,255,0.4)] bg-[rgba(240,251,255,0.4)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"Mobile spec (below sm)"}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠Single-card swipe carousel. Track is ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"flex"})," with ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"translateX"})," driven by ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"cur"})," + ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"dragX"}),"; 380 ms cubic-bezier on release."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Drag boundaries"})," â first card hard-stops at ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"dx=0"}),"; last card uses rubber-band ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"dx/3"})," resistance."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Commit threshold"})," â drag distance > 50 px advances/regresses one step on touch-end."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Swipe-hint chevrons"})," â render on mount, fade out on first ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"touchstart"}),". Dim (opacity .25) at the appropriate boundary card."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Dot indicators"})," â tap-to-jump; active dot 24 px wide cyan, others 8 px ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"rgba(9,17,51,0.18)"}),"."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Scene height"})," â fixed 300 px on mobile (no clamp)."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Track gutter trick"})," â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"-mx-6 px-6"})," + ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"overflowX: clip"})," + ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"overflowY: visible"})," so the cardâs box-shadow renders past the page gutter without breaking layout."]})]})]}),e.jsx(n,{rows:[["items","InteractivePanelGroupItem[]","â (required)"],["items[].num","number (1-indexed)","â (resolves to /fluree-custom-numerals/NN-vibrant-fill-white_custom.svg)"],["items[].title","string","â"],["items[].body","
8string (kept short â fixed-height reservation)","â"],["items[].renderScene","(args: { playKey: number; active: boolean }) => ReactNode","â"],["defaultSelected","number","0"],["className","string (passed to desktop row wrapper)","â"]]}),e.jsxs("div",{className:"mt-6 rounded-[8px] border-2 border-dashed border-[rgba(220,38,38,0.4)] bg-[rgba(254,226,226,0.18)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#dc2626]",children:"Forbidden â autoplay is never allowed"}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"setInterval"})," / ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"setTimeout"})," auto-advance loops between panels."]}),e.jsx("li",{children:'â IntersectionObserver triggers that play scene reveals on viewport entry. (See CLAUDE.md "animated content never autoplays".)'}),e.jsxs("li",{children:["â Scene animation on mount. The render-prop must read ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"active"})," from its arg and return the static end-state when ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"active === false"}),"."]}),e.jsx("li",{children:"â Hover-to-play. Hovering a panel may show the violet ring; it must not start a typewriter, draw edges, or sequence in elements."})]}),e.jsxs("p",{className:"mt-3 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:["Click is the only trigger. ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"playKey"})," bumps on every click (including re-clicking the active panel) so consumers can ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"<Scene key={`scene-${playKey}`} />"}),' to remount the scene SVG and restart its CSS keyframes â gives the user "click to replay".']})]}),e.jsx(i,{links:[{label:"Live: HowItWorksStage on the homepage",href:"/#how-it-works"}]})]}),e.jsxs(l,{id:"tables",title:"Tables",children:[e.jsxs("div",{className:"mb-6 rounded-[8px] border border-dashed border-[rgba(122,91,255,0.45)] bg-[rgba(122,91,255,0.06)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"Template-level pattern"}),e.jsx("p",{className:"font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:"Tables are a canonical template â every comparison matrix, feature list, or tabular data presentation on the marketing site must use one of the two variants below. Both share the same mobile contract; pick by column count and data shape."}),e.jsxs("ul",{className:"mt-3 space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"SideBySideComparison"}),' â 3-column "Traditional vs Fluree" matrix with capability rows. Replaces 14 inline grid forks across product and solution pages.']}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"ComparisonTable"}),' â N-column generic comparison (4+ columns, e.g. "Fluree vs Spreadsheets vs PoolParty vs SharePoint"). Auto-detects and highlights the Fluree column.']})]})]}),e.jsxs("div",{className:"mb-8 rounded-[8px] border border-[rgba(19,198,255,0.4)] bg-[rgba(207,243,255,0.25)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"Mobile contract (Apr 2026)"}),e.jsx("p",{className:"font-gotham-narrow text-[13px] leading-[20px] text-[#202152] mb-2",children:"Both table components share the same mobile rules. New table components or page-level forks must follow this contract â copying inline CSS-grid table patterns into pages is forbidden (see anti-p
8atterns below)."}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Edge-to-edge bleed on mobile"})," â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"-mx-6 sm:mx-0"})," escapes the standard ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"container mx-auto px-6"})," page gutter so the scrolling viewport reclaims the 48 px of side padding."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Sticky first column"})," â row labels are ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"position: sticky; left: 0"})," with a subtle inset shadow so users keep row context while comparison columns scroll horizontally."]}),e.jsxs("li",{children:["⢠",e.jsxs("strong",{children:["Real ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"<table>"})," elements"]})," â never per-row CSS Grid. Independent grid cells size differently when content wraps and break vertical alignment across rows."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Page never scrolls horizontally"})," â only the table itself does. The card is the overflow boundary."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Tighter cell padding on mobile"})," â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"px-3 py-3"})," on mobile, ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"px-5 py-4"})," at md+ â claws back precious horizontal space."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Square corners on mobile"}),", rounded at sm+ â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"rounded-none border-y"})," â ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"sm:rounded-3xl sm:border"}),". Rounded corners against the screen edge read as broken."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Fade-right scroll affordance"})," â a 32 px gradient overlay on mobile signals there's more to the right."]})]})]}),e.jsx(t,{label:"SideBySideComparison â 3-column Traditional vs Fluree (replaces 14 inline forks)",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(Ae,{traditionalName:"SQL, warehouse, or BI",flureeName:"Semantic ops layer",rows:[{cap:"Time to answer",traditional:"Days, if an analyst is free â dashboards only, if built",fluree:"Seconds â plain-English, across every system"},{cap:"Cross-system queries",traditional:"Manual joins, or pre-built dashboards only",fluree:"Native â any connected system"},{cap:"Ad-hoc questions",traditional:"New ticket every time",fluree:"Unlimited â ask anything"},{cap:"Audit trail",traditional:"Manual or limited",fluree:"Immutable, complete â examiner-ready"}]})})}),e.jsx(n,{rows:[["traditionalName","string","â (required)"],["flureeName","string","â (required)"],["rows","{ cap, traditional, fluree }[]","â (required)"],["traditionalLabel","string",'"Traditional"'],["flureeLabel","string",'"Fluree"'],["capabilityLabel","string",'"Capability"'],["className","string","â"]]}),e.jsx(t,{label:"SideBySideComparison â custom eyebrow labels (e.g. JsonLd Plain vs Linked)",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(Ae,{traditionalLabel:"Plain",traditionalName:"JSON",flureeLabel:"Linked",flureeName:"JSON-LD",rows:[{cap:"Schema-aware",traditional:"No â strings are just strings",fluree:"Every key is a typed concept with an IRI"},{cap:"Cross-doc lineage",traditional:"None â each doc is a silo",fluree:"Entities link across files and systems"},{cap:"Machine-reasonable",traditional:"Limited â keys aren't predicates",fluree:"SPARQL-queryable, OWL-reasonable"}]})})}),e.jsx(t,{label:"ComparisonTable â N-column generic comparison (auto-highlights Fluree column)",
8wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(Tt,{headers:["Feature","Spreadsheets","PoolParty / Semaphore","SharePoint","Fluree ITM"],rows:[["Governance workflows","Email approvals","Maintenance + candidate workflows","Document workflows only","Native, role-based, traceable"],["Data model architecture","Ad-hoc tabs","UI, API, validation derive from model","Form-specific customization","Model-driven everywhere"],["Inter-vocabulary alignment","Manual crosswalks","Typed, scored mappings","Available, not native","First-class concept mapping"],["Version control","File copies","Native versioning with comparisons","Document versions","Diff reports + branch / merge"],["Audit trail","Limited","Every action, field, user, timestamp","Document-centric","Immutable, complete"]]})})}),e.jsx(n,{rows:[["headers","string[]","â (required)"],["rows","string[][]","â (required)"],["flureeColumnIndex","number","auto-detect by /fluree|solo|cam|sense|itm|graphrag/i"],["noHighlight","boolean","false"],["className","string","â"]]}),e.jsxs("div",{className:"mt-8 rounded-[8px] border border-[rgba(19,198,255,0.4)] bg-[rgba(240,251,255,0.4)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"Which variant to reach for"}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Use SideBySideComparison"})," when the comparison is binary (Traditional vs Fluree) and rows are capabilities. The ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"Minus"})," / ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"Check"})," glyphs and the cyan accent rail on the Fluree column do the visual heavy lifting."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Use ComparisonTable"}),' when comparing 4+ approaches (Fluree vs three+ named competitors) or for benchmark-style data without a "right answer" column (pass ',e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"noHighlight"}),")."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Migration adapters"})," â if your data uses non-default row keys (e.g. ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"{ cap, them, fluree }"})," or ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"{ cap, json, jsonld }"}),"), map inline at the prop site: ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"rows={data.map(r => ({ cap: r.cap, traditional: r.them, fluree: r.fluree }))}"}),". Do not introduce a third table component."]})]})]}),e.jsxs("div",{className:"mt-6 rounded-[8px] border-2 border-dashed border-[rgba(220,38,38,0.4)] bg-[rgba(254,226,226,0.18)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#dc2626]",children:"Forbidden patterns"}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["â Inline ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"grid grid-cols-[1fr_1fr_1fr]"})," per row to fake a table. Cells size independently and break vertical alignment when content wraps. This was the pattern across 14 pages before Apr 2026 â all migrated to SideBySideComparison."]}),e.jsxs("li",{children:["â Wrapping a fixed-width table in a fixed-width parent without ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"overflow-x-auto"}),". The page horizontally scrolls instead of the table â exactly the broken behavior the mobile contract forbids."]}),e.jsxs("li",{children:["â Using ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"overflow: hidden"})," on the scrolling wrapper. Clips content with no recourse on mobile."]}),e.jsx("li",{children:"â Forking the component to add a single one-
8off variant. Extend the existing component with a prop, or use the row-key adapter pattern above."}),e.jsxs("li",{children:["â Custom ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"<table>"})," elements in product or solution pages. The four bespoke tables in ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"/company/brand"})," and ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(220,38,38,0.1)]",children:"/dev/icon-audit"})," are reference / audit surfaces and not in scope."]})]})]}),e.jsx(i,{links:[{label:"SideBySideComparison: FintechOperations",href:"/solutions/financial/fintech-operations"},{label:"SideBySideComparison: FlureeCore (Neo4j vs Fluree)",href:"/platform/core"},{label:"SideBySideComparison: GraphRAG (Vector RAG vs GraphRAG)",href:"/graphrag"},{label:"ComparisonTable: Fluree ITM (5-col)",href:"/platform/itm"},{label:"ComparisonTable: Fluree CAM",href:"/platform/cam"},{label:"ComparisonTable: Fluree AI",href:"/fluree-ai"}]})]}),e.jsxs(l,{id:"visual-placeholder",title:"VisualPlaceholder",children:[e.jsxs(t,{label:"Default + custom aspect",children:[e.jsx("div",{className:"w-[300px]",children:e.jsx(U,{label:"Dashboard Preview"})}),e.jsx("div",{className:"w-[200px]",children:e.jsx(U,{label:"Square",aspectRatio:"1/1"})})]}),e.jsx(n,{rows:[["label","string (required)","â"],["aspectRatio","string (CSS)",'"16/7"'],["className","string",'""']]}),e.jsx(i,{links:[{label:"Case study templates",href:"/case-studies/financial-services-data-portal"},{label:"Product templates",href:"/fluree-ai"}]})]}),e.jsxs(l,{id:"breadcrumb-pattern",title:"Breadcrumb Navigation",children:[e.jsx(t,{label:"Standard breadcrumb (detail pages)",children:e.jsxs("nav",{className:"text-xs text-muted-foreground flex items-center gap-1.5",children:[e.jsx(le,{to:"/resources",className:"hover:text-foreground transition-colors",children:"Resources"}),e.jsx(z,{className:"w-3 h-3"}),e.jsx(le,{to:"/blog",className:"hover:text-foreground transition-colors",children:"Blog"}),e.jsx(z,{className:"w-3 h-3"}),e.jsx("span",{className:"text-[#202152] truncate max-w-[250px]",children:"Article Title Here"})]})}),e.jsx(n,{rows:[["separator","ChevronRight icon, w-3 h-3","â"],["links","text-xs text-muted-foreground, hover:text-foreground","â"],["current page","text-[#202152], truncate max-w-[250px]","â"],["container","flex items-center gap-1.5","â"]]}),e.jsx(i,{links:[{label:"Blog Post",href:"/blog"},{label:"Video Detail",href:"/resources"},{label:"Case Studies",href:"/case-studies"}]})]}),e.jsxs(l,{id:"blog-card",title:"Blog Card",children:[e.jsx(t,{label:"Standard grid card",children:e.jsx("div",{className:"w-[300px] rounded-2xl border border-transparent bg-card overflow-hidden",style:{boxShadow:C},children:e.jsxs("div",{className:"p-6",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:"Enterprise AI"}),e.jsx("span",{className:"text-[10px] text-muted-foreground ml-auto",children:"Apr 14"})]}),e.jsx("p",{className:"text-lg font-bold text-foreground leading-snug mb-2 line-clamp-2",children:"How to Build a Semantic Layer for Enterprise AI"}),e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed line-clamp-3",children:"Only 7% of enterprises say their data is completely ready for AI..."}),e.jsxs("div",{className:"flex items-center justify-between mt-4",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"Brian Platz"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"8 min"})]})]})})}),e.jsx(n,{rows:[["container","rounded-2xl border-transparent bg-card + CARD_SHADOW","â"],["category","text-[10px] font-mono uppercase tracking-widest text-fluree-purple","â"],["title","text-lg font-bold text-foreground line-clamp-2","â"],["excerpt","text-sm text-muted-foreground line-clamp-3","â"],["hover","hover:-translate-y-1 hover:shadow-lg","lift + shadow"]]}),e.jsx(i,{links:[{label:"Blog",href:"/blog"},{label:"Resources",href:"/resources"},{label:"Homepage",href:"/"}]})]}),e.jsxs(l,{id:"video-card",title:"Video Card",children:[e.jsx(t,{label:"Thumbn
8ail + play overlay",children:e.jsxs("div",{className:"w-[300px] rounded-2xl border border-transparent bg-card overflow-hidden",style:{boxShadow:C},children:[e.jsxs("div",{className:"aspect-video bg-primary/5 flex items-center justify-center relative",children:[e.jsx("div",{className:"w-14 h-14 rounded-full bg-accent/90 flex items-center justify-center shadow-lg",children:e.jsx(Gt,{className:"w-6 h-6 text-accent-foreground ml-0.5"})}),e.jsx("span",{className:"absolute bottom-2 right-2 px-2 py-0.5 rounded bg-primary/80 text-foreground text-[10px] font-mono",children:"12:34"})]}),e.jsxs("div",{className:"p-5",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[e.jsx(ae,{className:"w-3.5 h-3.5 text-accent"}),e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:"Demo"})]}),e.jsx("p",{className:"text-base font-semibold text-foreground leading-snug line-clamp-2",children:"Fluree Solo: Build a Knowledge Graph in Minutes"})]})]})}),e.jsx(n,{rows:[["thumbnail","aspect-video bg-primary/5","â"],["play button","w-14 h-14 rounded-full bg-accent/90 shadow-lg","centered"],["duration badge","absolute bottom-2 right-2, bg-primary/80, text-[10px] font-mono","â"],["type label","Video icon + text-[10px] font-mono uppercase","â"]]}),e.jsx(i,{links:[{label:"Resources",href:"/resources"}]})]}),e.jsxs(l,{id:"webinar-card",title:"Webinar Card",children:[e.jsx(t,{label:"Upcoming + On-Demand",children:e.jsxs("div",{className:"flex gap-4 flex-wrap",children:[e.jsx("div",{className:"w-[280px] rounded-2xl border border-transparent bg-card overflow-hidden",style:{boxShadow:C},children:e.jsxs("div",{className:"p-5",children:[e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-success mb-2 block",children:"Upcoming"}),e.jsx("p",{className:"text-base font-semibold text-foreground leading-snug mb-2 line-clamp-2",children:"Building AI-Ready Data Foundations"}),e.jsxs("div",{className:"flex items-center gap-3 text-xs text-muted-foreground mb-3",children:[e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(Dt,{className:"w-3 h-3"})," Apr 28"]}),e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(re,{className:"w-3 h-3"})," 45 min"]})]}),e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx("div",{className:"w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center",children:e.jsx("span",{className:"text-[10px] font-bold text-accent",children:"B"})}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"Brian Platz"})]}),e.jsx(d,{variant:"primary",theme:"blue",size:"sm",children:"Register Now"})]})}),e.jsx("div",{className:"w-[280px] rounded-2xl border border-transparent bg-card overflow-hidden",style:{boxShadow:C},children:e.jsxs("div",{className:"p-5",children:[e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-purple mb-2 block",children:"On-Demand"}),e.jsx("p",{className:"text-base font-semibold text-foreground leading-snug mb-2 line-clamp-2",children:"GraphRAG for Regulated Industries"}),e.jsx("div",{className:"flex items-center gap-3 text-xs text-muted-foreground mb-3",children:e.jsxs("span",{className:"flex items-center gap-1",children:[e.jsx(re,{className:"w-3 h-3"})," 45 min"]})}),e.jsx(d,{variant:"outline",size:"sm",children:"Watch Replay"})]})})]})}),e.jsx(n,{rows:[["container","rounded-2xl border-transparent bg-card + CARD_SHADOW","â"],["status (upcoming)","text-fluree-success, font-mono uppercase","â"],["status (on-demand)","text-accent, font-mono uppercase","â"],["speaker avatar","w-6 h-6 rounded-full bg-accent/10","initials"],["metadata","Calendar + Clock icons, text-xs","â"]]}),e.jsx(i,{links:[{label:"Resources",href:"/resources"}]})]}),e.jsxs(l,{id:"resource-card",title:"Resource Download Card",children:[e.jsx(t,{label:"Whitepaper / guide card",children:e.jsxs("div",{className:"w-[280px] rounded-2xl border border-transparent bg-card overflow-hidden",style:{boxShadow:C},children:[e.jsx("div",{className:"aspect-[16/10] bg-gradient-to-br from-primary/5 to-accent/5 flex items-center justify-center",children:e.jsx(E,{className:"w-10 h-10 text-accent/30"})}),e.jsxs("div",{className:"p-5",children:[e.jsxs("span",{className:"inline-flex items-center gap-1.5 text-[10px] font-mono uppercase tracking-widest text-fluree-purple mb-2",children:[e.jsx(E,{className:"w-3 h-3"})," Whitepaper"]}),e.jsx("p",{className:"text-base font-semibold text-foreground leading-snug line-clamp-2",children:"Semantic GraphRAG: A Complete Overview"}),e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed line-clamp-2 mt-2",children:"How knowledge graphs deliver 4x more accurate AI retrieval."}),e.jsx("p",{className:"text-xs text-muted-foreground mt-3",children:"24 pages · 15 min read"}),e.jsx("div",{className:"mt-4 w-full bg-accent/10 text-accent text-sm font-semibold py-2.5 rounded-xl text-center",children:"Download Free â"})]})]})}),e.jsx(n,{rows:[["image area","aspect-[16/10] gradient bg + icon fallback","â"],["type label","icon + text-[10px] font-mono uppercase text-accent","â"],["title","text-base font-semibold line-clamp-2","â"],["description","text-sm text-muted-foreground line-clamp-2","â"],["metadata","page count + reading time, text-xs","â"],["CTA","bg-accent/10 text-accent rounded-xl, hover:bg-accent","â"]]}),e.jsx(i,{links:[{label:"Resources",href:"/resources"}]})]}),e.jsxs(l,{id:"case-study-card",title:"Case Study Card",children:[e.jsx(t,{label:"Standard case study card",children:e.jsx("div",{className:"w-[300px] rounded-2xl border border-transparent bg-card overflow-hidden",style:{boxShadow:C},children:e.jsxs("div",{className:"p-5",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(Re,{className:"w-3.5 h-3.5 text-accent"}),e.jsx("span",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-purple",children:"Case Study"}),e.jsx("span",{className:"text-[10px] text-muted-foreground ml-auto",children:"Financial Services"})]}),e.jsx("p",{className:"text-base font-semibold text-foreground leading-snug mb-2 line-clamp-2",children:"Financial Leader Scales an AI-Driven Data Portal"}),e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed line-clamp-2 mb-4",children:"500K documents indexed. Hundreds of analysts served daily."}),e.jsx("div",{className:"flex flex-wrap gap-2 mb-4",children:["500K documents","10x knowledge base"].map(a=>e.jsx("span",{className:"px-2.5 py-1 rounded-full text-[10px] font-medium bg-accent/10 text-fluree-deep",children:a},a))}),e.jsxs("span",{className:"inline-flex items-center gap-1 text-xs font-semibold text-accent",children:["Read case study ",e.jsx(k,{className:"w-3 h-3"})]})]})})}),e.jsx(n,{rows:[["container","rounded-2xl border-transparent bg-card + CARD_SHADOW","â"],["type header","Building2 icon + 'Case Study' + industry right-aligned","â"],["metric pills","rounded-full bg-accent/10 text-fluree-deep text-[10px] â dark text for WCAG contrast","â"],["CTA","text-xs font-semibold text-accent + ArrowRight","â"]]}),e.jsx(i,{links:[{label:"Case Studies",href:"/case-studies"},{label:"Homepage",href:"/"},{label:"Resources",href:"/resources"}]})]}),e.jsxs(l,{id:"toc-sidebar",title:"Table of Contents (Sidebar)",children:[e.jsx(t,{label:"Blog post sidebar TOC",children:e.jsxs("div",{className:"w-[250px]",children:[e.jsx("p",{className:"text-[10px] font-mono uppercase tracking-widest text-fluree-purple mb-3",children:"On this page"}),["The Problem","How Semantic Layers Work","GraphRAG Architecture","When to Use What","The Bottom Line"].map((a,v)=>e.jsx("a",{href:"#",onClick:Qe=>Qe.preventDefault(),className:`block text-[13px] py-1.5 border-l-2 pl-3 transition-colors leading-snug ${v===1?"border-accent text-accent font-medium":"border-transparent text-muted-foreground hover:text-foreground hover:border-border"}`,children:a},a))]})}),e.jsx(n,{rows:[["header",'text-[10px] font-mono uppercase tracking-widest text-fluree-purple = "On this page"',"â"],["link (active)","border-l-2 border-accent text-accent font-medium","â"],["link (inactive)","border-l-2 border-transparent text-muted-foreground","â"],["link spacing","text-[13px] py-1.5 pl-3","â"],["extraction","Regex on h2 headings from markdown","auto-generated"],["scroll spy","IntersectionObserver, 150px offset","updates activeId"]]}),e.jsx(i,{links:[{label:"Blog Post",href:"/blog"}]})]}),e.jsxs(l,{id:"cta-card",title:"CTA Card / Side CTA",children:[e.jsx(t,{label:"Sidebar CTA (blog post)",children:e.jsxs("div",{className:"w-[280px] rounded-2xl border border-transparent bg-card p-6",style:{boxShadow:C},children:[e.jsxs("div",{className:"flex items-center gap-2 mb-3",children:[e.jsx(we,{className:"w-4 h-4 text-accent"}),e.jsx("span",{className:"text-sm font-bold text-foreground",children:"See it in action"})]}),e.jsx("p",{className:"text-sm text-muted-foreground leading-relaxed mb-4",children:"Get a personalized walkthrough of the Fluree platform tailored to your data challenges."}),e.jsx(d,{variant:"primary",theme:"blue",size:"sm",children:"Book a Demo"}),e.jsx("div",{className:"mt-2 flex justify-center",children:e.jsx(d,{asChild:!0,variant:"ghost",size:"xxs",iconRight:e.jsx(k,{className:"w-3 h-3"}),children:e.jsx("a",{href:"#",onClick:a=>a.preventDefault(),children:"Browse resources"})})})]})}),e.jsx(t,{label:"Inline CTA (video detail)",children:e.jsxs("div",{className:"w-full max-w-[500px] rounded-2xl border border-transparent bg-card p-6 flex items-center justify-between gap-4",style:{boxShadow:C},children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-base font-bold text-foreground mb-1",children:"Ready to see it in action?"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Get a personalized demo of the Fluree platform."})]}),e.jsx(d,{variant:"primary",theme:"blue",size:"md",children:"Book a Demo"})]})}),e.jsx(n,{rows:[["Sidebar CTA","rounded-2xl bg-card p-6 + CARD_SHADOW, stacked layout","Blog sidebar"],["Inline CTA","rounded-2xl bg-card p-6 + CARD_SHADOW, flex row layout","Video detail"],["primary CTA","FlureeButton variant=primary theme=blue size=sm/md","â"],["secondary CTA","FlureeButton variant=ghost size=xxs + ArrowRight","â"]]}),e.jsx(i,{links:[{label:"Blog Post (sidebar)",href:"/blog"},{label:"Video Detail (inline)",href:"/resources"}]})]}),e.jsxs(l,{id:"sticky-filter-bar",title:"Sticky Filter Bar â Topic Row",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[720px]",children:["The second row below the fixed resource-type ribbon (",e.jsx("a",{href:"#secondary-nav-pills",className:"underline text-accent",children:"see above"}),") â an ordinary ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"sticky top-[98px] z-20"})," bar (not ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"fixed"}),", so it scrolls away with the page below the ribbon), holding the topic pills that narrow every tabâs results. Selected state matches accordion/badge conventions elsewhere on the site: s
8olid ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"bg-accent border-accent"})," with a leading check glyph via ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"StableWeightLabel showCheckWhenSelected"}),"."]}),e.jsx(t,{label:"Live example â click a topic to filter",children:e.jsx("div",{className:"w-full max-w-[720px] rounded-[8px] border border-border bg-background/95 backdrop-blur-sm p-3",children:e.jsx("div",{className:"flex flex-wrap items-center gap-1.5 overflow-x-auto scrollbar-hide pb-1",children:["All Topics","Enterprise AI","Knowledge Graphs","GraphRAG","Data Governance"].map(a=>e.jsx(Se,{label:a,selected:R===a,onClick:()=>x(R===a?"All Topics":a),showCheckWhenSelected:!0,buttonClassName:`px-3 py-1 rounded-full border transition-colors ${R===a?"bg-accent border-accent":"border-border hover:border-foreground/30"}`,textClassName:`font-gotham-narrow text-[11px] ${R===a?"text-accent-foreground":"text-muted-foreground hover:text-foreground"}`},a))})})}),e.jsx(n,{rows:[["container","sticky top-[98px] z-20 (below the fixed ribbon, not fixed itself)","â"],["pill row","overflow-x-auto scrollbar-hide â scrolls on mobile, never shows a scrollbar","â"],["pill","StableWeightLabel showCheckWhenSelected, rounded-full border","â"],["selected state","bg-accent border-accent text-accent-foreground + check glyph","â"],["source","src/pages/Resources.tsx","â"]]}),e.jsx(i,{links:[{label:"Resources",href:"/resources"},{label:"Ribbon above",href:"/dev/components#secondary-nav-pills"}]})]}),e.jsx(P,{label:"Templates",color:"text-[#091133]"}),e.jsxs(l,{id:"section-template",title:"SectionTemplate â Section Composition Standard",children:[e.jsxs("div",{className:"mb-8 rounded-[10px] border border-[rgba(19,198,255,0.35)] bg-[rgba(207,243,255,0.18)] p-6 max-w-[760px]",children:[e.jsx("p",{className:"mb-1 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#0ea5e9]",children:"Design System Standard"}),e.jsxs("p",{className:"font-gotham-narrow text-[14px] leading-[22px] text-[#091133]",children:[e.jsx("strong",{children:"SectionTemplate"})," is the atomic layout standard for every marketing section on the site. It enforces the non-negotiable typographic hierarchy â eyebrow label â section heading â intro paragraph â then exposes a fully open ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"children"})," slot for any display pattern below (card grids, accordions, carousels, comparison tables, interactive diagrams, etc.)."]}),e.jsxs("p",{className:"mt-3 font-gotham-narrow text-[14px] leading-[22px] text-[#202152]",children:[e.jsx("strong",{children:"Rule:"})," Every new marketing section must be built on this template. The three header elements are non-negotiable and must appear in order. Only the content slot varies."]})]}),e.jsx(t,{label:"Non-negotiable typographic hierarchy",children:e.jsxs("div",{className:"w-full max-w-[760px] rounded-[10px] border border-[rgba(9,17,51,0.08)] bg-white p-7 space-y-3",children:[e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.18)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#091133]",children:"1"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#091133]",children:"SolidSectionLabel"}),e.jsx("p",{className:"font-operator text-[12px] text-[#4b57a5] mt-0.5",children:"Eyebrow chip â names the category or context. Variant controls color."})]})]}),e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.18)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#091133]",children:"2"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#091133]",children:"H2 Heading"}),e.jsxs("p",{className:"font-operator text-[12px] text-[#4b57a5] mt-0.5",children:[e.jsx("code",{className:"bg-[rgba(19,198,255,0.12)] px-1 rounded",children:"text-3xl md:text-5xl font-extrabold tracking-tight text-foreground leading-[1.05]"})," â accepts JSX for line breaks."]})]})]}),e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.18)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#091133]",children:"3"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#091133]",children:"Intro Paragraph"}),e.jsxs("p",{className:"font-operator text-[12px] text-[#4b57a5] mt-0.5",children:[e.jsx("code",{className:"bg-[rgba(19,198,255,0.12)] px-1 rounded",children:"text-lg md:text-xl leading-relaxed text-muted-foreground"})," â max 65 ch, never centered on long copy."]})]})]}),e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.12)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#8a93a8]",children:"â"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#202152]",children:"Content Slot (children)"}),e.jsxs("p",{className:"font-operator text-[12px] text-[#8a93a8] mt-0.5",children:["Open â any display pattern. Separated from header by ",e.jsx("code",{className:"bg-[rgba(19,198,255,0.12)] px-1 rounded",children:"mt
8-12 md:mt-16"}),"."]})]})]})]})}),e.jsx(t,{label:"Left-aligned (default) â with placeholder content slot",children:e.jsx("div",{className:"w-full rounded-[12px] border border-[rgba(9,17,51,0.08)] overflow-hidden",children:e.jsx(ve,{label:"Section Label",labelVariant:"vibrant",heading:e.jsxs(e.Fragment,{children:["Section heading.",e.jsx("br",{}),"Two lines, on brand."]}),body:"This is the intro paragraph â the lead sentence that expands on the section heading. Keep it to two or three lines, under 65 characters wide, never center-aligned on long copy.",children:e.jsx(U,{label:"Content slot â accepts any display pattern",height:"h-[180px]"})})})}),e.jsx(t,{label:"Centered variant â symmetric content below",children:e.jsx("div",{className:"w-full rounded-[12px] border border-[rgba(9,17,51,0.08)] overflow-hidden",children:e.jsx(ve,{label:"Section Label",labelVariant:"lilac",heading:"Centered heading statement.",body:"A shorter intro paragraph for symmetric layouts. The body auto-constrains to 54 ch and centers with the heading.",align:"center",children:e.jsx(U,{label:"Content slot â centered layout variant",height:"h-[180px]"})})})}),e.jsx(n,{rows:[["label","string (required)","â"],["heading","React.ReactNode (required)","â"],["body","React.ReactNode (required)","â"],["labelVariant",'"lilac"|"plum"|"vibrant"|"ember"|"violet"|"ice"','"vibrant"'],["align",'"left" | "center"','"left"'],["headingClassName","string â e.g. max-w-[14ch] for tight headings","â"],["contentSpacing","string â Tailwind classes for headerâcontent gap",'"mt-12 md:mt-16"'],["id","string â <section> anchor id","â"],["className","string â extra classes on <section>","â"],["containerClassName","string â extra classes on inner container","â"],["children","React.ReactNode â any display pattern","â"]]}),e.jsxs("div",{className:"mt-6 rounded-[8px] border border-dashed border-[rgba(19,198,255,0.4)] bg-[rgba(207,243,255,0.1)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#0ea5e9]",children:"Usage note"}),e.jsxs("p",{className:"font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:["The ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"py-16"})," section padding,",e.jsx("code",{className:"font-operator text-[12px] px-1 ml-1 rounded bg-[rgba(19,198,255,0.15)]",children:"container mx-auto px-6"})," wrapper, and ",e.jsx("code",{className:"font-operator text-[12px] px-1 ml-1 rounded bg-[rgba(19,198,255,0.15)]",children:"ScrollReveal"})," on the header are built-in and should not be overridden. Use ",e.jsx("code",{className:"font-operator text-[12px] px-1 ml-1 rounded bg-[rgba(19,198,255,0.15)]",children:"className"})," only for background color changes (e.g. a dark navy section). Sections with unique chrome (e.g. a hero) are exempt â use SectionTemplate only for standard content sections."]})]})]}),e.jsxs(l,{id:"feature-block-with-menu",title:"FeatureBlockWithMenu â Side Menu + Feature Card",children:[e.jsxs("div",{className:"mb-8 rounded-[10px] border border-[rgba(19,198,255,0.35)] bg-[rgba(207,243,255,0.18)] p-6 max-w-[760px]",children:[e.jsx("p",{className:"mb-1 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#0ea5e9]",children:"Design System Standard"}),e.jsxs("p",{className:"font-gotham-narrow text-[14px] leading-[22px] text-[#091133]",children:[e.jsx("strong",{children:"FeatureBlockWithMenu"})," is the canonical template for any section where a side menu drives a focused feature card area. The chrome is fixed; only the inner content cross-fades (300 ms) when the user clicks a menu item. On mobile, the side menu collapses into a horizontal scrolling tab ribbon that auto-centers the active tab."]}),e.jsxs("p",{className:"mt-3 font-gotham-narrow text-[14px] leading-[22px] text-[#202152]",children:[e.jsx("strong",{children:"Gold standard:"})," the homepage ",e.jsx("a",{href:"/#",className:"underline decoration-[rgba(19,198,255,0.6)] underline-offset-2",children:"Selected Case Studies"})," section. Its rendered output is the visual contract for this template â every new instance must match it exactly."]})]}),e.jsx(t,{label:"Behavior contract",children:e.jsxs("div",{className:"w-full max-w-[760px] rounded-[10px] border border-[rgba(9,17,51,0.08)] bg-white p-7 space-y-3",children:[e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.18)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#091133]",children:"1"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#091133]",children:"Click-only menu â no hover swap"}),e.jsx("p",{className:"font-operator text-[12px] text-[#4b57a5] mt-0.5",children:"Hovering an item shows the vibrant-blue indicator (300 ms opacity fade-in); clicking commits to the item with the violet active indicator and bold label weight. Card content never swaps on hover."})]})]}),e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.18)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#091133]",children:"2"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#091133]",children:"Cross-fade only â chrome stays static"}),e.jsxs("p",{className:"font-operator text-[12px] text-[#4b57a5] mt-0.5",children:["The card frame (rounded 24 px, white gradient, violet glow shadow ",e.jsx("code",{className:"bg-[rgba(19,198,255,0.12)] px-1 rounded",children:"0 0 48px 12px rgba(183,117,214,0.2)"}),") does not animate. Only the inner content fades opacity 1 â 0 â 1 over 300 ms each side."]})]})]}),e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.18)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#091133]",children:"3"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#091133]",children:"Mobile: horizontal tab ribbon"}),e.jsxs("p",{className:"font-operator text-[12px] text-[#4b57a5] mt-0.5",children:["Below ",e.jsx("code",{className:"bg-[rgba(19,198,255,0.12)] px-1 rounded",children:"lg"})," the side menu becomes a full-width scrollable tab ribbon. Active tab is Fluree Deep background + white text; inactive is ",e.jsx("code",{className:"bg-[rgba(19,198,255,0.12)] px-1 rounded",children:"text-fluree-deep/60"}),". Selected tab smooth-scrolls to the center of the strip."]})]})]}),e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("span",{className:"shrink-0 w-6 h-6 rounded-full bg-[rgba(19,198,255,0.18)] flex items-center justify-center font-gotham font-[900] text-[11px] text-[#091133]",children:"4"}),e.jsxs("div",{children:[e.jsx("p",{className:"font-gotham font-[700] text-[13px] text-[#091133]",children:"Footer CTA anchor"}),e.jsxs("p",{className:"font-operator text-[12px] text-[#4b57a5] mt-0.5",children:["Optional ",e.jsx("code",{className:"bg-[rgba(19,198,255,0.12)] px-1 rounded",children:"menuFooterCta"})," renders as a ghost button at the foot of the desktop menu and centered below the card on mobile."]})]})]})]})}),e.jsx(t,{label:"Live demo â homepage Selected Case Studies (gold standard)",wrap:!0,children:e.jsx("div",{className:"w-full rounded-[12px] border border-[rgba(9,17,51,0.08)] overflow-hidden",children:e.jsx(g,{sectionLabel:"Selected Case Studies",heading:e.jsxs(e.Fragment,{children:["Real results across ",e.jsx("br",{className:"hidden md:block"}),"industries we serve."]}),items:[{key:"decision",menuLabel:"Decision Intelligence",content:e.jsx(G,{eyebrow:{useCase:"USE CASE",industry:"Financial Services"},illustration:e.jsx("span",{className:"relative block h-full w-full",children:e.jsx("img",{src:"/images/SVG/dis-ring_financial-composite.svg",alt:u.dataPortal.industry,loading:"lazy",decoding:"async",className:"absolute left-1/2 top-1/2 h-[150%] w-[150%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"})}),stat:u.dataPortal.impactAtGlance[0],title:"Driving Just-in-Time Decision Intelligence",body:u.dataPortal.summary,quote:u.dataPortal.quote,cta:{label:"Read the Case Study",href:`/case-studies/${u.dataPortal.slug}`}})},{key:"regulatory",menuLabel:"Regulatory Intelligence",content:e.jsx(G,{eyebrow:{useCase:"USE CASE",industry:"Pharmaceutical"},illustration:e.jsx("span",{className:"relative block h-full w-full",children:e.jsx("img",{src:"/images/SVG/dis-ring_pill-composite.svg",alt:u.pharmaTransformation.industry,loading:"lazy",decoding:"async",className:"absolute left-1/2 top-1/2 h-[150%] w-[150%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"})}),stat:u.pharmaTransformation.impactAtGlance[0],title:"Making Pharma Data AI-Ready in Weeks",body:u.pharmaTransformation.summary,cta:{label:"Read the Case Study",href:`/case-studies/${u.ph
8armaTransformation.slug}`}})},{key:"customer",menuLabel:"Customer Intelligence",content:e.jsx(G,{eyebrow:{useCase:"USE CASE",industry:"Banking"},illustration:e.jsx("span",{className:"relative block h-full w-full",children:e.jsx("img",{src:"/images/SVG/dis-ring_scope-composite.svg",alt:u.communityBank.industry,loading:"lazy",decoding:"async",className:"absolute left-1/2 top-1/2 h-[150%] w-[150%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"})}),stat:u.communityBank.impactAtGlance[0],title:"Turning Customer Records into Proactive Outreach",body:u.communityBank.summary,quote:u.communityBank.quote,cta:{label:"Read the Case Study",href:`/case-studies/${u.communityBank.slug}`}})},{key:"ai-infra",menuLabel:"AI Infrastructure",content:e.jsx(G,{eyebrow:{useCase:"USE CASE",industry:"Beauty & Cosmetics"},illustration:e.jsx("span",{className:"relative block h-full w-full",children:e.jsx("img",{src:"/images/SVG/dis-ring_gear-composite.svg",alt:u.marketingIntelligence.industry,loading:"lazy",decoding:"async",className:"absolute left-1/2 top-1/2 h-[150%] w-[150%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"})}),stat:u.marketingIntelligence.impactAtGlance[0],title:"Building a Data Agent Factory",body:u.marketingIntelligence.summary,quote:u.marketingIntelligence.quote,cta:{label:"Read the Case Study",href:`/case-studies/${u.marketingIntelligence.slug}`}})}],menuFooterCta:{label:"Browse all Case Studies",href:"/case-studies"}})})}),e.jsx(t,{label:"Live demo â bulleted card variant (capability / pillar sections)",wrap:!0,children:e.jsx("div",{className:"w-full rounded-[12px] border border-[rgba(9,17,51,0.08)] overflow-hidden",children:e.jsx(g,{sectionLabel:"Why Banks Choose Fluree",heading:e.jsxs(e.Fragment,{children:["Six capabilities no core vendor ",e.jsx("br",{className:"hidden md:block"}),"or warehouse gives you on its own."]}),items:[{key:"core-agnostic",menuLabel:"Works with the core you already have",content:e.jsx(m,{icon:e.jsx(M,{className:"h-9 w-9"}),title:"Jack Henry, Fiserv, FIS, or legacy â Fluree connects, doesnât replace",body:"Your core banking system stays exactly where it is. Fluree connects through standard APIs and creates a semantic layer across the 4â8 systems most community banks already operate â no rip-and-replace, no 18-month core migration.",bullets:["Jack Henry, Fiserv, FIS, and legacy systems supported","Core, LOS, treasury, docs, and ancillary systems unified","No data movement â intelligence moves, data stays"]})},{key:"unified-view",menuLabel:"Unified view across every system",content:e.jsx(m,{icon:e.jsx(q,{className:"h-9 w-9"}),title:"One graph across core, LOS, treasury, and document systems",body:"Customer data lives across 3â5 reporting systems that compete for the same answer. Fluree resolves customers, accounts, loans, properties, and households into a unified graph â one durable identity with lineage back to every contributing source.",bullets:["Customers, households, accounts, loans, properties resolved","Golden records with lineage to every source system","One truth across the enterprise, not per-screen"]})},{key:"nl-queries",menuLabel:"Plain-English for bankers",content:e.jsx(m,{icon:e.jsx(O,{className:"h-9 w-9"}),title:"Credit, lending, ops, and compliance teams ask questions directly",body:"Credit officers, lenders, and compliance leaders ask questions in plain English â no SQL, no analyst queue, no waiting for dashboards. Queries return cited, source-attributed answers in seconds.",bullets:["Natural-language queries across every system","Dashboards generated on the fly, not waited on","No specialist training required for business users"]})}]})})}),e.jsxs(t,{label:"Live demo â bulleted card with optional illustration (bottom-right corner)",wrap:!0,children:[e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"Why Banks Choose Fluree",heading:e.jsxs(e.Fragment,{children:["Six capabilities no core vendor ",e.jsx("br",{className:"hidden md:block"}),"or warehouse gives you on its own."]}),items:[{key:"fast-deploy",menuLabel:"Live in 4â8 weeks",content:e.jsx(m,{icon:e.jsx(M,{className:"h-9 w-9"}),title:"Proof-of-value without an 18-month core or warehouse project",body:"Most community banks run production queries in 4â6 weeks. Full deployment is typically 8â12 weeks â a fraction of a core replacement (18â24 months, $2â5M+) or a ground-up warehouse (6â12 months of ETL pipeline work before any insight lands).",bullets:["Production queries in 4â6 weeks","Full deployment in 8â12 weeks, typical","Incremental value â every week, more answers unlocked"],illustration:e.jsx("img",{src:"/brand/brand-character/Yeti_Pose_optimized/07_search.webp",alt:"",className:"block h-auto w-full",loading:"lazy"})})},{key:"core-agnostic",menuLabel:"Works with the core you already have",content:e.jsx(m,{icon:e.jsx(q,{className:"h-9 w-9"}),title:"Jack Henry, Fiserv, FIS, or legacy â Fluree connects, doesnât replace",body:"Your core banking system stays exactly where it is. Fluree connects through standard APIs and creates a semantic layer across the 4â8 systems most community banks already operate â no rip-and-replace, no 18-month core migration.",bullets:["Jack Henry, Fiserv, FIS, and legacy systems supported","Core, LOS, treasury, docs, and ancillary systems unified","No data movement â intelligence moves, data stays"],illustration:e.jsx("img",{src:"/brand/brand-character/Yeti_Pose_optimized/06_laptop-cube.webp",alt:"",className:"block h-auto w-full",loading:"lazy"})})},{key:"no-illustration",menuLabel:"No-illustration fallback",content:e.jsx(m,{icon:e.jsx(O,{className:"h-9 w-9"}),title:"Illustration is optional â cards without one render unchanged",body:"Pass `illustration={â¦}` only when the card benefits from a brand graphic. Omit the prop to render the card with the body and bullets occupying the full width â the layout is identical to the base bulleted variant.",bullets:["No prop = no illustration = no extra space reserved","Mix and match items in the same menu","Hidden below md to keep mobile readable"]})}]})}),e.jsxs("div",{className:"mt-4 max-w-[760px] text-[12px] leading-[18px] text-[#556480]",children:["Pass any no
8de as ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"illustration"})," â Yeti pose ",e.jsx("code",{children:"<img>"}),", Flurio, custom SVG, infographic, or any decorative graphic. Auto-hides below md to keep mobile cards uncluttered. Always decorative (",e.jsx("code",{children:"aria-hidden"}),", ",e.jsx("code",{children:"pointer-events:none"}),")."]})]}),e.jsx(t,{label:"Live demo â numbered menu variant, solid (process steppers)",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"How It Works",heading:e.jsx(e.Fragment,{children:"Three steps to a governed semantic layer."}),numeralStyle:"solid",items:[{key:"step-1",menuLabel:"Connect your sources",menuNumeral:1,content:e.jsx(m,{icon:e.jsx(M,{className:"h-9 w-9"}),title:"Connect, donât migrate â your systems stay where they live",body:"Fluree reads from your existing systems through standard APIs and connectors. No data movement, no rip-and-replace, no quarter-long ETL projects.",bullets:["Standard API + connector library","Source systems untouched","Incremental, governed onboarding"]})},{key:"step-2",menuLabel:"Resolve and govern",menuNumeral:2,content:e.jsx(m,{icon:e.jsx(q,{className:"h-9 w-9"}),title:"Entities resolve to golden records with full lineage",body:"Fluree Sense unifies the same entity across systems â customers, accounts, products â with confidence scores, provenance, and policy attached at the data layer.",bullets:["Cross-system entity resolution","Lineage on every attribute","Policy-aware retrieval, by default"]})},{key:"step-3",menuLabel:"Ask in plain English",menuNumeral:3,content:e.jsx(m,{icon:e.jsx(O,{className:"h-9 w-9"}),title:"Plain-English questions return cited, governed answers",body:"GraphRAG-grounded answers with source citations and full SPARQL trail. No prompt-engineering, no hallucinations â production-ready conversational analytics.",bullets:["Natural-language across every system","Citations under every answer","MCP-native for downstream agents"]})}]})})}),e.jsx(t,{label:"Live demo â numbered menu variant, cutout",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"How It Works (Cutout numerals)",heading:e.jsx(e.Fragment,{children:"Same three steps, cutout numeral fill."}),numeralStyle:"cutout",items:[{key:"c-step-1",menuLabel:"Connect your sources",menuNumeral:1,content:e.jsx(m,{icon:e.jsx(M,{className:"h-9 w-9"}),title:"Connect, donât migrate â your systems stay where they live",body:"Fluree reads from your existing systems through standard APIs and connectors.",bullets:["Standard API + connector library","Source systems untouched","Incremental, governed onboarding"]})},{key:"c-step-2",menuLabel:"Resolve and govern",menuNumeral:2,content:e.jsx(m,{icon:e.jsx(q,{className:"h-9 w-9"}),title:"Entities resolve to golden records with full lineage",body:"Fluree Sense unifies the same entity across systems with confidence scores, provenance, and policy attached at the data layer.",bullets:["Cross-system entity resolution","Lineage on every attribute","Policy-aware retrieval, by default"]})},{key:"c-step-3",menuLabel:"Ask in plain English",menuNumeral:3,content:e.jsx(m,{icon:e.jsx(O,{className:"h-9 w-9"}),title:"Plain-English questions return cited, governed answers",body:"GraphRAG-grounded answers with source citations and full SPARQL trail.",bullets:["Natural-language across every system","Citations under every answer","MCP-native for downstream agents"]})}]})})}),e.jsx(t,{label:"Live demo â numbered + icon menu variant, solid",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"The Path to Production",heading:e.jsx(e.Fragment,{children:"Three milestones, anchored by visual landmarks."}),numeralStyle:"solid",items:[{key:"ni-step-1",menuLabel:"Launch the pilot",menuNumeral:1,menuIcon:e.jsx(H,{className:"h-5 w-5"}),content:e.jsx(m,{icon:e.jsx(H,{className:"h-9 w-9"}),title:"A scoped pilot ships in weeks, not quarters",body:"Flureeâs connector-first onboarding gets a working knowledge graph in front of users in 4â8 weeks.",bullets:["Working pilot in 4â8 weeks","Validated entity model and access policies","Real users, real questions, real answers"]})},{key:"ni-step-2",menuLabel:"Expand to the platform",menuNumeral:2,menuIcon:e.jsx(V,{className:"h-5 w-5"}),content:e.jsx(m,{icon:e.jsx(V,{className:"h-9 w-9"}),title:"The semantic layer becomes the platform substrate",body:"Add sources, departments, and use cases without re-architecting.",bullets:["Add sources without re-architecture","BI + AI on the same governed graph","One semantic model, many surfaces"]})},{key:"ni-step-3",menuLabel:"Govern and scale",menuNumeral:3,menuIcon:e.jsx(W,{className:"h-5 w-5"}),content:e.jsx(m,{icon:e.jsx(W,{className:"h-9 w-9"}),title:"Defensible governance at enterprise scale",body:"Immutable lineage, policy-aware retrieval, and audit-ready answers.",bullets:["Immutable audit trail per query","Per-user policies in the data layer","Examiner-grade evidence on demand"]})}]})})}),e.jsx(t,{label:"Live demo â numbered + icon menu variant, cutout",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"The Path to Production (Cutout numerals)",heading:e.jsx(e.Fragment,{children:"Same milestones, cutout numeral fill."}),numeralStyle:"cutout",items:[{key:"nic-step-1",menuLabel:"Launch the pilot",menuNumeral:1,menuIcon:e.jsx(H,{className:"h-5 w-5"}),content:e.jsx(m,{icon:e.jsx(H,{className:"h-9 w-9"}),title:"A scoped pilot ships in weeks, not quarters",body:"Flureeâs connector-first onboarding gets a working knowledge graph in front of users in 4â8 weeks.",bullets:["Working pilot in 4â8 weeks","Validated entity model and access policies","Real users, real questions, real answers"]})},{key:"nic-step-2",menuLabel:"Expand to the platform",menuNumeral:2,menuIcon:e.jsx(V,{className:"h-5 w-5"}),content:e.jsx(m,{icon:e.jsx(V,{className:"h-9 w-9"}),title:"The semantic layer becomes the platform substrate",body:"Add sources, departments, and use cases without re-architecting.",bullets:["Add sources without re-architecture","BI + AI on the same governed graph","One semantic model, many surfaces"]})},{key:"nic-step-3",menuLabel:"Govern and scale",menuNumeral:3,menuIcon:e.jsx(W,{className:"h-5 w-5"}),content:e.jsx(m,{icon:e.jsx(W,{className:"h-9 w-9"}),title:"Defensible governance at enterprise scale",body:"Immutable lineage, policy-aware retrieval, and audit-ready answers.",bullets:["Immutable audit trail per query","Per-user policies in the data layer","Examiner-grade evidence on demand"]})}]})})}),e.jsx(t,{label:"Live demo â Article card variant, 2-col compare grid (product/pillar pages)",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"What Makes Fluree AI Different",heading:e.jsxs(e.Fragment,{children:["Three things wrappers over generic data stores can","'","t do."]}),items:[{key:"ac-cg-1",menuLabel:"GraphRAG retrieval",content:e.jsx(D,{icon:e.jsx(Pe,{className:"h-9 w-9"}),title:"Retrieves by relationships â not by fragments.",body:"Most AI platforms chunk documents and retrieve by statistical similarity. Fluree traverses your knowledge graph with structured context, source lineage, and relationship-aware evidence.",whyStatement:"Because âstatistical similarityâ isnât the same as truth.",cta:{label:"Explore GraphRAG retrieval",href:"#"}
8,children:e.jsx(ye,{items:[{icon:e.jsx(Be,{className:"h-5 w-5"}),label:"Vector RAG",body:"Top-k fragments with conflicting context and no relationship path."},{icon:e.jsx(De,{className:"h-5 w-5"}),label:"GraphRAG",body:e.jsxs(e.Fragment,{children:["Customer â Contract â Amendment â Policy",e.jsx("br",{}),"with cited lineage."]})}]})})},{key:"ac-cg-2",menuLabel:"Provable answers",content:e.jsx(D,{icon:e.jsx(_e,{className:"h-9 w-9"}),title:"Every answer is inspectable, auditable, defensible.",body:"Sources queried, records retrieved, relationships traversed, data freshness â every response carries the receipts.",whyStatement:"Because 'the AI said so' is not a defense.",children:e.jsx(ye,{items:[{icon:e.jsx(Be,{className:"h-5 w-5"}),label:"Black-box LLM",body:"Plausible prose with no traceable source."},{icon:e.jsx(De,{className:"h-5 w-5"}),label:"Fluree",body:"Cryptographically signed, fully cited responses."}]})})}]})})}),e.jsx(t,{label:"Live demo â Article card variant, bullet list",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"Core Capabilities",heading:e.jsx(e.Fragment,{children:"What the graph makes possible at every layer."}),items:[{key:"ac-bl-1",menuLabel:"Graph retrieval",content:e.jsx(D,{icon:e.jsx(Pe,{className:"h-9 w-9"}),title:"Retrieval that follows relationships, not statistics.",body:"Fluree traverses the knowledge graph to assemble evidence-backed answers â no chunk ranking, no conflicting context.",whyStatement:"Because context that ignores relationships produces answers that ignore reality.",children:e.jsx(Ne,{items:["Traverses entity relationships, not token windows","Assembles multi-hop evidence paths","Source citations attached to every answer"]})})},{key:"ac-bl-2",menuLabel:"Provenance",content:e.jsx(D,{icon:e.jsx(_e,{className:"h-9 w-9"}),title:"Every record knows where it came from.",body:"Signatures, verifiable credentials, and lineage are first-class parts of the model â not bolt-on metadata.",whyStatement:"Because an AI answer without a trace is a legal liability.",cta:{label:"View provenance docs",href:"#",external:!0},children:e.jsx(Ne,{items:["JWS-signed transactions (ed25519)","W3C Verifiable Credentials and DIDs, native","Lineage queryable like any other graph pattern"]})})}]})})}),e.jsx(t,{label:"Live demo â Article card variant, stacked rows",wrap:!0,children:e.jsx("div",{className:"w-full",children:e.jsx(g,{sectionLabel:"Data-level security",heading:e.jsx(e.Fragment,{children:"A governed slice of the graph for every user or agent."}),items:[{key:"ac-sr-1",menuLabel:"Data-level security",content:e.jsx(D,{icon:e.jsx(Et,{className:"h-9 w-9"}),title:"Each user or agent operates in a governed slice of the graph.",body:"Fluree embeds governance directly in the data. The LLM never encounters data it shouldnât see â because unauthorized data never enters its context.",whyStatement:"Because the safest data for AI is data the model never receives.",cta:{label:"Read the data-level security docs",href:"#",external:!0},children:e.jsx(dt,{items:["HR agent â payroll records only","Sales agent â revenue and account context only","Operations agent â inventory and logistics only"]})})}]})})}),e.jsx(t,{label:"Mobile preview â live render at 390 px (iframe)",wrap:!0,children:e.jsxs("div",{className:"w-full flex flex-col items-center gap-4",children:[e.jsx("div",{className:"rounded-[44px] bg-[#091133] p-[10px]",style:{boxShadow:"0 30px 60px -18px rgba(9,17,51,0.35), 0 8px 24px -12px rgba(9,17,51,0.18), inset 0 0 0 1px rgba(255,255,255,0.06)"},children:e.jsx("div",{className:"rounded-[34px] overflow-hidden bg-white",children:e.jsx("iframe",{src:"/dev/preview/feature-block-with-menu",title:"FeatureBlockWithMenu â mobile preview",width:390,height:780,className:"block border-0",loading:"lazy"})})}),e.jsx("p",{className:"font-operator text-[11px] uppercase tracking-[1.6px] text-[#0ea5e9]",children:"390 Ã 780 â iPhone 14 viewport"}),e.jsxs("p",{className:"font-gotham-narrow text-[12px] leading-[18px] text-[#4b57a5] max-w-[420px] text-center",children:["Live render of the homepage ",e.jsx("code",{className:"font-operator text-[11px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"SelectedCaseStudies"})," section in an isolated iframe at mobile width â useful for confirming tab-ribbon
8spacing, illustration sizing, and stat scale below the ",e.jsx("code",{className:"font-operator text-[11px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"lg"})," (1024 px) breakpoint without resizing the browser."]})]})}),e.jsx(n,{rows:[["sectionLabel","string â eyebrow chip above the heading","â"],["heading","React.ReactNode â H2; pass JSX for line breaks","â"],["items","FeatureBlockWithMenuItem[] â { key, menuLabel, content }","â"],["menuFooterCta","{ label: string; href: string } â ghost CTA at foot of menu","â"],["className","string â extra classes on <section> wrapper","â"]]}),e.jsxs("div",{className:"mt-6 rounded-[8px] border border-dashed border-[rgba(19,198,255,0.4)] bg-[rgba(207,243,255,0.1)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#0ea5e9]",children:"Card primitives"}),e.jsxs("p",{className:"font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:["The ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"content"})," slot accepts any node, but five primitives ship with the template:"]}),e.jsxs("ul",{className:"mt-3 space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureBlockSingleCard"})," â the rich 2-column card from the homepage (illustration + eyebrow + stat on the left, title + body + quote + CTA on the right). Use this for case-study-style content."]}),e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureBlockBulletCard"})," â 72 px gradient icon-header on the same row as the title, indented intro paragraph, and a hanging gradient check-circle list. Use this for capability / pillar / feature sections (e.g. âWhy X Choose Yâ). Optional ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"illustration"})," prop renders a Yeti pose, Flurio, infographic, or any decorative graphic in the bottom-right (auto-hidden below md)."]}),e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureBlockArticleCard"})," â same icon-header + indented body as ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"BulletCard"}),", plus an optional âWHY IT MATTERSâ cyan callout, a flexible middle slot, and an optional footer text-link. Pair the middle slot with ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureArticleCompareGrid"})," (2-col compare cells), ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureArticlePillRow"})," (illustrative pill row), ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureArticleStackedRows"})," (full-width vertical rows), or ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureArticleBulletList"})," (gradient hero check-circle bullets). Use for product/pillar sections needing a stronger editorial voice than ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"BulletCard"}),"."]}),e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureBlockLeanCard"})," â single icon + title + body + CTA tile."]}),e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"FeatureBlockLeanCardRow"})," â row of 2 or 3 lean cards inside one menu pane."]})]}),e.jsx("p",{className:"mt-4 mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#0ea5e9]",children:"Menu variants"}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Default"})," â label only. The pattern every existing section uses."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Numbered"})," â pass ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"menuNumeral"})," per item for sequential / process explainers. Numerals fade between deep â cyan (hover) â violet (active) via CSS-only swap of the Fluree Custom Numeral Badges."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Numbered + icon"})," â pass both ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"menuNumeral"})," and ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"menuIcon"})," when the step also benefits from a visual anchor."]}),e.jsxs("li",{children:["⢠",e.jsx("strong",{children:"Numeral fill"})," â pass ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:'numeralStyle="cutout"'})," at the section level to swap solid badges for cutout glyphs (entire menu â not per-item)."]})]})]}),e.jsx(i,{links:[{label:"Reference: SelectedCaseStudies (homepage)",href:"/#"}]})]}),e.jsxs(l,{id:"global-nav",title:"Global Navigation (Navbar)",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[720px]",children:["Fixed top navigation bar used site-wide. Features a ",e.jsx("strong",{children:"translucent glassmorphism background"})," â page content beneath the nav is softly blurred as it scrolls through, creating depth and a frosted-glass material feel. The nav fixed at the top of this page is the live component."]}
8),e.jsx(t,{label:"Background â translucent base + gradient tint",children:e.jsxs("div",{className:"w-full max-w-[720px] rounded-[8px] border border-[rgba(19,198,255,0.3)] bg-[rgba(207,243,255,0.15)] p-5 space-y-2",children:[e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"background base:"})," rgba(253, 253, 253, 0.72) â slightly translucent white (28% see-through)"]}),e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"gradient overlay:"})," radial-gradient(ellipse 180% 350% at -5% 100%) â purple â cyan â peach â orange tints (11â38% alpha)"]}),e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"box-shadow:"})," 0px 0px 8px 0px rgba(19, 198, 255, 0.24)"]})]})}),e.jsx(t,{label:"Backdrop blur â 12px",children:e.jsxs("div",{className:"w-full max-w-[720px] rounded-[8px] border border-[rgba(19,198,255,0.3)] bg-[rgba(207,243,255,0.15)] p-5 space-y-2",children:[e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"backdrop-filter:"})," blur(12px) â applied via Tailwind ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"backdrop-blur-[12px]"})]}),e.jsxs("p",{className:"font-gotham-narrow text-[13px] text-[#202152] mt-2",children:["Because the background uses a translucent fill (",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[11px]",children:"rgba(253,253,253,0.72)"}),") instead of a solid color, the 12px backdrop blur actually shows through â page content passing beneath the nav is softly blurred as the user scrolls. Combined with the slight opacity on the background, this delivers the perception of a frosted-glass material."]})]})}),e.jsx(t,{label:"Dimensions & positioning",children:e.jsxs("div",{className:"w-full max-w-[720px] rounded-[8px] border border-[rgba(19,198,255,0.3)] bg-[rgba(207,243,255,0.15)] p-5 space-y-2",children:[e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"position:"})," fixed | ",e.jsx("strong",{children:"top / left / right:"})," 0 | ",e.jsx("strong",{children:"z-index:"})," 50"]}),e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"height:"})," 66px | ",e.jsx("strong",{children:"layout:"})," container mx-auto flex items-center justify-between px-6"]})]})}),e.jsx(n,{rows:[["position","fixed left-0 right-0 top-0","â"],["z-index","50","â"],["height","66px","â"],["background (base)","rgba(253,253,253,0.72)","â"],["background (overlay)","radial-gradient, 11â38% alpha tints","â"],["backdrop-filter","blur(12px)","â"],["box-shadow","0px 0px 8px 0px rgba(19,198,255,0.24)","â"],["source","src/components/layout/Navbar.tsx","â"]]}),e.jsx(i,{links:[{label:"View live (every page)",href:"/"}]})]}),e.jsxs(l,{id:"secondary-subnav",title:"Secondary Navigation (Subnav)",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[720px]",children:["Sticky horizontal wayfinding bar that lives ",e.jsx("strong",{children:"directly below the global Navbar"})," at ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"top-[66px]"}),". Visual language matches the primary Navbar (same Blend-Lite-04 radial-gradient wash, same translucent base, same 12px backdrop blur) so the two surfaces read as one continuous frosted-glass panel. The leading category chip uses the primary mega-menu subheader style (Operator ",e.jsx("strong",{children:"700"}),", 14/24, tracking 1.4px, uppercase, ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"#202152"}),") so a user can scan top-to-bottom and immediately read where they sit inside the content hierarchy. The active item renders as a pale-cyan pill (",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"#f0fbff"}),") with a faint cyan rim drop-shadow."]}),e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[720px]",children:["Originally built for the Product â ",e.jsx("strong",{children:"Enterprise Suite"})," family of pages (",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"EnterpriseSubnav"}),"). The same shell is reused on the Solo page with a smooth-scroll-to-anchor variant, and on every ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"/solutions/*"})," route as ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"SolutionsSubnav"})," â three left-chip groups in a single bar."]}),e.jsxs("div",{className:"mb-8 rounded-[8px] border border-dashed border-[rgba(122,91,255,0.45)] bg-[rgba(122,91,255,0.06)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-fluree-purple",children:"SolutionsSubnav â three exclusive variants"}),e.jsxs("p",{className:"font-gotham-narrow text-[13px] leading-[20px] text-[#202152] mb-3",children:["Mounts on every ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"/solutions/*"})," page via ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"PageShell.solutionsSubnavVariant"}),". Outer shell, gradient, typography, and active-pill treatment match EnterpriseSubnav verbatim. Like EnterpriseSubnav, the bar shows exactly ",e.jsx("strong",{children:"one"})," category at a time â categories are mutually exclusive and never appear together. The category is chosen per-page by passing one of three string variants:"]}),e.jsxs("ul",{className:"space-y-1.5 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:'"industries"'})," â Industries chip + 7 NavLinks to leaf industry detail pages (Core Banking AI, Fintech Operations, Data Monetization, Content Monetization, Archival & Cataloguing, Regulatory Intelligence, Clinical Data Intelligence). Used on the 5 industry landings (Financial, Media, Supply, Government, Pharma) and their 7 leaf detail pages."]}),e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:'"enterprise-data"'})," â Enterprise Data chip + 6 NavLinks to cross-vertical pages (GraphRAG, Semantic Layer, Conversational Analytics, Enterprise Knowledge Graph, Golden Records, AI Agent Mesh). Used on 5 of the 6 cross-vertical pages."]}),e.jsxs("li",{children:["⢠",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:'"featured"'})," â Featured chip + 6 anchor-jump ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"<button>"}),"s. Active highlight driven by IntersectionObserver borrowed from ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"SoloSubnav"}),"; clicking smooth-scrolls to ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"getElementById(anchorId)"}),". Currently used on Enterprise Knowledge Graph (the showcase page)."]})]}),e.jsxs("p",{className:"mt-3 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsx("strong",{children:"No horizontal scroll."})," The bar is sized to fit the longest variant inside the standard ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"container mx-auto px-6"})," at the ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"xl"})," breakpoint. If a future variant would overflow, shorten labels via shortLabel rather than re-introducing horizontal scroll."]}),e.jsxs("p",{className:"mt-3 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:["Featured anchor IDs (a contract): ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"kg-explained"}),", ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"how-we-build"}),", ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"why-different"}),", ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"side-by-side"}),", ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"playbook"}),", ",e.jsx("code",{className:"font-operator text-[12px] px-1 rounded bg-[rgba(19,198,255,0.15)]",children:"faq"}),". The Featured page should declare these section IDs so the IntersectionObserver can highlight the active anchor as the user scrolls."]})]}),e.jsx(t,{label:"Active state â pale-cyan pill",children:e.jsxs("div",{className:"w-full max-w-[720px] rounded-[8px] border border-[rgba(19,198,255,0.3)] bg-[rgba(207,243,255,0.15)] p-5 space-y-2",children:[e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"background:"})," #f0fbff (pale-cyan)"]}),e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"drop-shadow:"})," 0px 1px 0.5px rgba(19, 198, 255, 0.2) â faint cyan rim"]}),e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"radius:"})," 16px (pill) | ",e.jsx("strong",{children:"padding:"})," px-3 py-px"]})]})}
8),e.jsx(t,{label:"Background â same surface as the Navbar",children:e.jsxs("div",{className:"w-full max-w-[720px] rounded-[8px] border border-[rgba(19,198,255,0.3)] bg-[rgba(207,243,255,0.15)] p-5 space-y-2",children:[e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"base:"})," rgba(253, 253, 253, 0.72)"]}),e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"overlay:"})," radial-gradient(ellipse 180% 350% at -5% 100%) â purple â cyan â peach â orange (11â38% alpha)"]}),e.jsxs("p",{className:"font-operator text-[12px] text-[#091133]",children:[e.jsx("strong",{children:"backdrop-filter:"})," blur(12px)"]})]})}),e.jsx(n,{rows:[["position","sticky top-[66px] z-40","â"],["breakpoint","hidden xl:block (1280px+)","â"],["category chip","Operator 700 · 11/18 · 1.1px tracking · #202152","â"],["item (default)","Gotham Narrow 400 · 12/18 · #091133","â"],["item (active)","bg #f0fbff · drop-shadow cyan rim · rounded-[16px]","â"],["transition","background-color, box-shadow · 150ms","â"],["overflow","container has overflow-x-auto scrollbar-hide â wide bars scroll horizontally, scrollbar never shows","â"],["EnterpriseSubnav data","src/content/enterpriseProducts.ts","â"],["EnterpriseSubnav component","src/components/shared/EnterpriseSubnav.tsx","â"],["SolutionsSubnav data","src/content/solutionsNav.ts","â"],["SolutionsSubnav component","src/components/shared/SolutionsSubnav.tsx","â"],["mount via","PageShell.showEnterpriseSubnav (boolean) | PageShell.solutionsSubnavVariant ('industries'|'enterprise-data'|'featured')","â"]]}),e.jsx(i,{links:[{label:"Platform (Enterprise Suite)",href:"/platform"},{label:"Solutions/Financial (industry landing)",href:"/solutions/financial"},{label:"Solutions/GraphRAG (cross-vertical)",href:"/solutions/graph-rag"},{label:"Solutions/Core Banking AI (leaf detail)",href:"/solutions/financial/core-banking-ai"},{label:"Solo (Jump to variant)",href:"/solo"}]})]}),e.jsxs(l,{id:"secondary-nav-pills",title:"Resources Secondary Nav â Resource-Type Ribbon",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[720px]",children:["A third instance of the fixed ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"top-[66px]"})," wayfinding-bar contract above â same navbar-matching gradient wash, same pale-cyan active pill (",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"SECONDARY_NAV_PILL_CLASSNAME"}),", shared from ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"src/lib/secondaryNavPill.ts"}),") â but built directly in ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"src/pages/Resources.tsx"})," rather than through EnterpriseSubnav/SolutionsSubnav, because its content shape (resource-type tabs, one of which expands into pipe-separated sub-filters, a keyword search box, and a live results counter) doesnât fit either componentâs prop contract. Unlike those two, it shows at ",e.jsx("strong",{children:"every"})," breakpoint â itâs the only way to switch content type on the page."]}),e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[720px]",children:["The ",e.jsx("strong",{children:"Downloads"})," tab uses ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"ExpandableChildTabGroup"})," (",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"src/components/shared/ExpandableChildTabGroup.tsx"}),") â clicking it grows the pill via ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"max-width"})," and reveals its Whitepaper | Guide | Report | Case Study | One-Pager sub-filters inline, staggered leftâright; closing reverses the choreography, fading children out rightâleft before the pill collapses. Every pill in the row â including the child sub-filters â sits inside an ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"overflow-x-auto scrollbar-hide"})," track, so on narrow viewports the row scrolls without ever showing a scrollbar (see the site-wide no-visible-scrollbar rule in CLAUDE.md)."]}),e.jsx(t,{label:"Live example â click Downloads to expand its sub-filters, toggle Featured, try it narrow",children:e.jsx("div",{className:"w-full max-w-[820px] rounded-[8px] border border-[rgba(19,198,255,0.3)] bg-[rgba(207,243,255,0.15)] p-5",children:e.jsxs("nav",{"aria-label":"Resource type demo",className:"flex items-center gap-3",children:[e.jsxs("div",{className:"flex min-w-0 flex-1 items-center gap-4 overflow-x-auto scrollbar-hide",children:[[{key:"all",label:"All Resources"},{key:"blog",label:"Blog"}].map(a=>e.jsx(Se,{label:a.label,selected:y===a.key,onClick:()=>S(a.key),buttonClassName:`shrink-0 ${Fe(y===a.key)}`,textClassName:"font-gotham-narrow text-[12px] leading-[18px] text-[#091133]"},a.key)),e.jsx(pt,{label:"Downloads",isOpen:y==="downloads",onLabelClick:()=>S("downloads"),containerClassName:Fe(y==="downloads"),parentTextClassName:"font-gotham-narrow text-[12px] leading-[18px] text-[#091133]",childTextClassName:"font-gotham-narrow text-[11px] leading-[18px]",dividerClassName:"text-[#13c6ffa8]",items:["Whitepaper","Guide","Report","Case Study","One-Pager"].map(a=>({key:a,label:a,selected:B===a,onClick:()=>J(B===a?"":a)}
8))}),e.jsxs("button",{type:"button",onClick:()=>K(a=>!a),role:"switch","aria-checked":T,className:"flex shrink-0 items-center gap-2",children:[e.jsx("span",{className:`relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors duration-200 ${T?"bg-accent":"bg-border"}`,children:e.jsx("span",{className:"absolute left-0.5 top-1/2 h-3 w-3 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out",style:{transform:`translateY(-50%) translateX(${T?"12px":"0px"})`}})}),e.jsx("span",{className:"font-gotham-narrow text-[10px] font-bold uppercase tracking-[1.1px] text-foreground",children:"Featured"})]})]}),e.jsxs("label",{className:"hidden shrink-0 items-center gap-2 rounded-lg border border-accent/[0.66] bg-fluree-ice/[0.66] px-[9px] h-6 w-[180px] sm:flex",children:[e.jsx(Ee,{className:"h-4 w-4 shrink-0 text-foreground/70","aria-hidden":!0}),e.jsx("input",{type:"text",placeholder:"Search Resources",className:"w-full bg-transparent font-mono text-[11px] text-foreground placeholder:text-foreground/60 focus:outline-none"})]})]})})}),e.jsx(n,{rows:[["container","fixed top-[66px] z-40, visible at every breakpoint (not hidden below xl)","â"],["pill chrome","SECONDARY_NAV_PILL_CLASSNAME(selected) â shared with EnterpriseSubnav/SolutionsSubnav treatment","src/lib/secondaryNavPill.ts"],["expandable tab","ExpandableChildTabGroup â width via max-width, children stagger-fade in/out","src/components/shared/ExpandableChildTabGroup.tsx"],["tab row overflow","overflow-x-auto scrollbar-hide â scrolls on mobile, never shows a scrollbar","â"],["Featured toggle","role=switch, bg-accent/bg-border track, 16px thumb","â"],["search box","border-accent/[0.66] bg-fluree-ice/[0.66], font-mono placeholder","hidden below lg"],["results counter","bg-fluree-deep pill + count, right of search box","hidden below lg"],["second row (topic pills)","sticky top-[98px] z-20, StableWeightLabel pills, overflow-x-auto scrollbar-hide","src/pages/Resources.tsx"],["source","src/pages/Resources.tsx","â"]]}),e.jsx(i,{links:[{label:"Resources",href:"/resources"}]})]}),e.jsxs(l,{id:"announcement-banner",title:"Announcement Banner",children:[e.jsxs("p",{className:"mb-6 font-gotham-narrow text-[14px] text-[#202152] max-w-[720px]",children:["Floating pill, rendered ",e.jsx("strong",{children:"subordinate to the primary nav"})," â in normal document flow directly below the fixed Navbar, above the page's first section (Apple.com store pattern: the nav always owns the top of the viewport, this is ordinary scrollable content underneath it). Two variants per ",e.jsx("a",{href:"https://www.figma.com/design/II14oX2hZ1hPzfMor8TLdl/_FLUR.EE_2026_Web-REDESIGN_Claude-as-developer?node-id=748-1955",target:"_blank",rel:"noopener noreferrer",className:"underline text-accent",children:"Figma node 748:1955"}),": light (white pill) and dark (navy pill). Gradient avatar badge + bold text + underlined CTA, no dismiss control. Below the ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"sm"})," breakpoint the full text + CTA don't fit a phone-width pill, so the pill instead shows just ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"config.mobileText"})," as one short underlined link. Config-driven via ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"src/content/banner.ts"})," â a single ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"active"})," flag toggles it site-wide, plus an expiry date. ",e.jsx("strong",{children:"Currently active."})]}),e.jsx(t,{label:'Light variant (style: "accent")',children:e.jsx("div",{className:"flex w-full justify-center py-2",children:e.jsxs("div",{className:"inline-flex max-w-full items-center gap-2 rounded-full border border-[#F6F6F4] bg-white pl-2 pr-4 py-1.5 shadow-[0px_10px_15px_-3px_rgba(9,17,51,0.1),0px_4px_6px_0px_rgba(9,17,51,0.05)]",children:[e.jsx("span",{className:"relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-[3.5px] border-white shadow-[0px_1px_1px_rgba(9,17,51,0.08)]",style:{background:"linear-gradient(135deg, hsl(var(--fluree-violet)) 0%, hsl(var(--fluree-vibrant)) 100%)"},children:e.jsx(ke,{className:"h-4 w-4 text-white"})}),e.jsxs("p",{className:"truncate text-sm font-bold text-foreground",children:["New: Fluree named a 2024 Gartner Cool Vendor"," ",e.jsx("span",{className:"underline underline-offset-2",children:"Read more"}),e.jsx(z,{className:"inline h-3.5 w-3.5 -mb-0.5"})]})]})})}),e.jsx(t,{label:'Dark variant (style: "primary")',children:e.jsx("div",{className:"flex w-full justify-center py-2",children:e.jsxs("div",{className:"inline-flex max-w-full items-center gap-2 rounded-full border border-[#9072C2] bg-[#171F69] pl-2 pr-4 py-1.5 shadow-[0px_10px_15px_-3px_rgba(9,17,51,0.1),0px_4px_6px_0px_rgba(9,17,51,0.05)]",children:[e.jsx("span",{className:"relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-[3.5px] border-white shadow-[0px_1px_1px_rgba(9,17,51,0.08)]",style:{background:"linear-gradient(135deg, hsl(var(--fluree-violet)) 0%, hsl(var(--fluree-vibrant)) 100%)"},children:e.jsx(ke,{className:"h-4 w-4 text-white"})}),e.jsxs("p",{className:"truncate text-sm font-bold text-white",children:["Fluree AI is here â the hosted Fluree platform, built on FlureeDB."," ",e.jsx("span",{className:"underline underline-offset-2",children:"Get started free"}),e.jsx(z,{className:"inline h-3.5 w-3.5 -mb-0.5"})]})]})})}),e.jsx(t,{label:"Configuration (src/content/banner.ts)",children:e.jsx("div",{className:"w-full max-w-[720px] rounded-[8px] border border-[rgba(19,198,255,0.3)] bg-[rgba(207,243,255,0.15)] p-5",children:e.jsx("pre",{className:"font-operator text-[12px] text-[#091133] whitespace-pre-wrap",children:`const bannerConfig: BannerConfig = { 9 active: true, // master on/off switch 10 text: "New: Fluree named a 2024 Gartner Cool Vendor...", 11 mobileText: "2024 Gartner Cool Vendor", // shown below sm, as the whole link 12 link: "/case-studies", 13 cta: "Read more", // chevron icon renders automatically 14 style: "accent", // "accent" = light pill, "primary" = dark pill 15 expires: "2026-12-31", // auto-hides after this date 16};`})})}),e.jsx(t,{label:"Behavior",children:e.jsxs("ul",{className:"w-full max-w-[720px] list-disc pl-5 font-gotham-narrow text-[13px] text-[#202152] space-y-1",children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Master switch:"})," set ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[11px]",children:"active: false"})," to hide site-wide. One-line re-enable."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Auto-expiry:"})," if ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[11px]",children:"expires"}
16)," is in the past, the banner hides even when active."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"No dismiss control:"})," matches the Apple.com reference â it's ordinary page content, not an interruption the user has to close."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Stacking:"})," renders in normal document flow directly below the fixed Navbar (PageShell / Index place a 66px spacer between them), scrolls away with the page."]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Mobile text swap:"})," below ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[11px]",children:"sm"}),", the pill drops the separate CTA and renders ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[11px]",children:"config.mobileText"})," as one short underlined link â no ellipsis-truncated CTA on phones."]})]})}),e.jsx(n,{rows:[["config.active","boolean","false"],["config.text","string","â"],["config.mobileText","string","â"],["config.link","string (route)","â"],["config.cta","string","â"],["config.style",'"accent" | "primary"','"accent"'],["config.expires","ISO date string","â"],["source","src/components/layout/AnnouncementBanner.tsx","â"],["config","src/content/banner.ts","â"]]}),e.jsx(i,{links:[{label:"Rendered from PageShell",href:"/platform"}]})]}),e.jsxs(l,{id:"logo-marquee",title:"LogoMarquee â Trust Band",children:[e.jsxs("div",{className:"mb-8 rounded-[10px] border border-[rgba(19,198,255,0.35)] bg-[rgba(207,243,255,0.18)] p-6 max-w-[760px]",children:[e.jsx("p",{className:"mb-1 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#0ea5e9]",children:"Design System Standard"}),e.jsxs("p",{className:"font-gotham-narrow text-[14px] leading-[22px] text-[#091133]",children:[e.jsx("strong",{children:"LogoMarquee"}),' is the single, canonical scrolling logo trust-band used across the entire site. Any time you need a "trusted by" / "in production at" / "media leaders" logo row, this is the only component to reach for. Do not build a fresh marquee, do not copy-paste the markup, do not write an inline ',e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"LogoStrip"})," â there is one design and one source of truth."]}),e.jsxs("p",{className:"mt-3 font-gotham-narrow text-[14px] leading-[22px] text-[#202152]",children:[e.jsx("strong",{children:"Rule:"})," Place ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"LogoMarquee"})," as a top-level sibling section in the page JSX â never nested inside a hero, card, or other section. It renders as its own ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"<section>"})," with its own padding and border."]})]}),e.jsxs("div",{className:"mb-8 rounded-[10px] border border-[rgba(9,17,51,0.08)] bg-white p-6 max-w-[760px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#202152]",children:"Logo artwork"}),e.jsxs("p",{className:"font-gotham-narrow text-[14px] leading-[22px] text-[#202152]",children:["All logo SVGs in ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"@/content/logos"})," are custom-crafted monochromatic artwork designed in the Fluree Deep brand color. They render correctly at ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"opacity-70"})," with no CSS filtering required. Never apply ",e.jsx("code",{className:"px-1 rounded bg-[rgba(255,80,80,0.12)] font-operator text-[12px] text-red-700",children:"grayscale"}),", ",e.jsx("code",{className:"px-1 rounded bg-[rgba(255,80,80,0.12)] font-operator text-[12px] text-red-700",children:"saturate"}),", ",e.jsx("code",{className:"px-1 rounded bg-[rgba(255,80,80,0.12)] font-operator text-[12px] text-red-700",children:"brightness"}),", or any other CSS filter to logo images â the artwork is already correct."]})]}),e.jsx(t,{label:"Live example â media logo set",children:e.jsx("div",{className:"w-full rounded-[12px] border border-[rgba(9,17,51,0.08)] overflow-hidden",children:e.jsx(Ce,{slugs:["cbc","npr","dow-jones","associated-press","dotdash-meredith","medscape","webmd-ignite","nsw-health"],label:"Trusted by publishing & media leaders"})})}),e.jsx(t,{label:"Default label variant",children:e.jsx("div",{className:"w-full rounded-[12px] border border-[rgba(9,17,51,0.08)] overflow-hidden",children:e.jsx(Ce,{slugs:["cbc","npr","dow-jones","associated-press","dotdash-meredith"]})})}),e.jsx(n,{rows:[["slugs","string[] (required) â keys from @/content/logos","â"],["label","string â eyebrow label text",'"Trusted by"'],["className","string â applied to outer <section>; use sparingly","â"],["source","src/components/shared/LogoMarquee.tsx","â"],["registry","src/content/logos.ts","â"]]}),e.jsxs("div",{className:"mt-6 rounded-[8px] border border-dashed border-[rgba(255,80,80,0.35)] bg-[rgba(255,80,80,0.04)] p-5 max-w-[760px]",children:[e.jsx("p",{className:"mb-3 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-red-600",children:"Forbidden patterns"}),e.jsxs("ul",{className:"space-y-2 font-gotham-narrow text-[13px] leading-[20px] text-[#202152]",children:[e.jsxs("li",{className:"flex gap-2",children:[e.jsx("span",{className:"text-red-500 shrink-0",children:"â"})," Inline ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"LogoStrip"})," components or any custom ad-hoc logo grid â originated from gpt-engineer scaffold; banned site-wide."]}),e.jsxs("li",{className:"flex gap-2",children:[e.jsx("span",{className:"text-red-500 shrink-0",children:"â"})," Writing ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"flex animate-marquee"})," directly in a page or component â use this component instead."]}),e.jsxs("li",{className:"flex gap-2",children:[e.jsx("span",{className:"text-red-500 shrink-0",children:"â"})," CSS filters on logo images: ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"grayscale"}),", ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"saturate"}),", ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"brightness"}),", etc. â the custom monochromatic artwork needs none."]}),e.jsxs("li",{className:"flex gap-2",children:[e.jsx("span",{className:"text-red-500 shrink-0",children:"â"})," Nesting ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"LogoMarquee"})," inside a hero section, card, or ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"ScrollReveal"})," wrapper â it must be a top-level sibling section."]}),e.jsxs("li",{className:"flex gap-2",children:[e.jsx("span",{className:"text-red-500 shrink-0",children:"â"})," Overriding the ",e.jsx("code",{className:"px-1 rounded bg-[rgba(19,198,255,0.15)] font-operator text-[12px]",children:"label"}),' without a strong reason â "Trusted by" is the canonical site-wide phrasing.']})]})]}),e.jsx(i,{links:[{label:"Content Monetization",href:"/solutions/media/content-monetization"},{label:"Archival & Cataloguing",href:"/solutions/media/archival-cataloguing"},{label:"Platform",href:"/platform"},{label:"Fluree Core",href:"/platform/core"}]})]}),e.jsx(P,{label:"Pages",color:"text-[#091133]"}),e.jsx("div",{id:"pages",className:"mb-20 scroll-mt-24",children:e.jsxs("div",{className:"rounded-[12px] border border-dashed border-[rgba(19,198,255,0.4)] bg-[rgba(207,243,255,0.15)] p-8 backdrop-blur-[4px]",children:[e.jsx("p",{className:"mb-2 font-operator font-[700] text-[11px] uppercase tracking-[1.6px] text-[#4b57a5]",children:"Coming Soon"}),e.jsx("h2",{className:"mb-3 font-gotham font-[900] text-[24px] leading-[30px] tracking-[0.48px] text-[#091133]",children:"Pages are the next tier up"}),e.jsx("p",{className:"max-w-[640px] font-gotham-narrow text-[14px] leading-[22px] text-[#202152]",children:"Pages are full compositions â complete screens built from templates, organisms, molecules, and atoms working together. This is the most complex tier of the atomic design system. Weâll start devising page structures from the library above and catalog them here as they take shape."})]})})]})})})]})};export{Ta as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.