1import{c as u,r as b,j as e,H as v,B as n,F as w}from"./index-BFuMcAQN.js";import{T as j,a as y,b as d,c as x}from"./tabs-BspqZqSm.js";import{C as l}from"./check-CeErdwWi.js";import{D as m}from"./download-z_6QCQ2F.js";import"./index-DaN40KFW.js";/** 2 * @license lucide-react v0.453.0 - ISC 3 * 4 * This source code is licensed under the ISC license. 5 * See the LICENSE file in the root directory of this source tree. 6 */const r=u("Copy",[["rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2",key:"17jyea"}],["path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",key:"zix9uf"}]]);/** 7 * @license lucide-react v0.453.0 - ISC 8 * 9 * This source code is licensed under the ISC license. 10 * See the LICENSE file in the root directory of this source tree. 11 */const C=u("Printer",[["path",{d:"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2",key:"143wyd"}],["path",{d:"M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6",key:"1itne7"}],["rect",{x:"6",y:"14",width:"12",height:"8",rx:"1",key:"1ue0tg"}]]);function H(){const[a,h]=b.useState(null);b.useEffect(()=>{document.title="Brand Style Guide - Call Karma"},[]);const t=(s,f)=>{navigator.clipboard.writeText(s),h(f),setTimeout(()=>h(null),2e3)},i=s=>s.toLowerCase().replace(/\s+/g,"-"),N=()=>{window.print()},c=`<svg className="w-12 h-12" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="none"> 12 <rect width="128" height="128" rx="24" fill="transparent"/> 13 <path d="M24 20C24 13.3726 29.3726 8 36 8H92C98.6274 8 104 13.3726 104 20V84C104 90.6274 98.6274 96 92 96H52L34 116V96H36C29.3726 96 24 90.6274 24 84V20Z" fill="#3192F6"/> 14 <rect x="40" y="56" width="8" height="24" rx="2" fill="white"/> 15 <rect x="54" y="48" width="8" height="32" rx="2" fill="white"/> 16 <rect x="68" y="40" width="8" height="40" rx="2" fill="white"/> 17 <rect x="82" y="32" width="8" height="48" rx="2" fill="white"/> 18</svg>`,g=`<div style="display: flex; align-items: center; gap: 12px;"> 19 <svg style="width: 48px; height: 48px;" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" fill="none"> 20 <rect width="128" height="128" rx="24" fill="transparent"/> 21 <path d="M24 20C24 13.3726 29.3726 8 36 8H92C98.6274 8 104 13.3726 104 20V84C104 90.6274 98.6274 96 92 96H52L34 116V96H36C29.3726 96 24 90.6274 24 84V20Z" fill="#3192F6"/> 22 <rect x="40" y="56" width="8" height="24" rx="2" fill="white"/> 23 <rect x="54" y="48" width="8" height="32" rx="2" fill="white"/> 24 <rect x="68" y="40" width="8" height="40" rx="2" fill="white"/> 25 <rect x="82" y="32" width="8" height="48" rx="2" fill="white"/> 26 </svg> 27 <span style="font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 30px; color: #1F2937;">Call Karma</span> 28</div>`,o={primary:[{name:"Primary Blue",hex:"#3192F6",hsl:"207 90% 54%",usage:"Primary brand color, CTAs, links"},{name:"Primary Foreground",hex:"#F7FBFF",hsl:"211 100% 99%",usage:"Text on primary blue"}],secondary:[{name:"Teal 600",hex:"#0D9488",hsl:"173 80% 30%",usage:"AI/QA product theme, secondary CTAs"},{name:"Teal 700",hex:"#0F766E",hsl:"173 97% 26%",usage:"Teal hover states"},{name:"Teal 500",hex:"#14B8A6",hsl:"173 80% 40%",usage:"Teal accents, badges"},{name:"Teal 50",hex:"#F0FDFA",hsl:"166 76% 97%",usage:"Teal backgrounds"}],neutral:[{name:"Gray 900",hex:"#111827",hsl:"220 14% 8%",usage:"Headlines, primary text"},{name:"Gray 700",hex:"#374151",hsl:"217 19% 27%",usage:"Body text"},{name:"Gray 600",hex:"#4B5563",hsl:"220 9% 46%",usage:"Secondary text"},{name:"Gray 200",hex:"#E5E7EB",hsl:"220 13% 91%",usage:"Borders, dividers"},{name:"Gray 50",hex:"#F9FAFB",hsl:"210 20% 98%",usage:"Background surfaces"}],gradients:[{name:"Blue Gradient",value:"linear-gradient(135deg, #3192F6 0%, #1E40AF 100%)",usage:"Hero backgrounds"},{name:"Teal Gradient",value:"linear-gradient(to bottom right, #0D9488 0%, #0F766E 100%)",usage:"AI product themes"},{name:"Subtle Gradient",value:"linear-gradient(to bottom right, #F1F5F9 0%, #DBEAFE 25%, #E0E7FF 100%)",usage:"Section backgrounds"}]},p={fonts:[{name:"Inter",usage:"Body text, UI elements",weights:"400, 500, 600, 700",url:"https://fonts.google.com/specimen/Inter"},{name:"Poppins",usage:"Headlines, display text",weights:"400, 600, 700, 800",url:"https://fonts.google.com/specimen/Poppins"}],scale:[{name:"Display Large",size:"text-5xl lg:text-6xl",pixels:"48px / 60px (lg)",usage:"Hero headlines"},{name:"Display Medium",size:"text-4xl lg:text-5xl",pixels:"36px / 48px (lg)",usage:"Section headers"},{name:"Heading 1",size:"text-3xl",pixels:"30px",usage:"Page titles"},{name:"Heading 2",size:"text-2xl",pixels:"24px",usage:"Card titles"},{name:"Heading 3",size:"text-xl",pixels:"20px",usage:"Subsections"},{name:"Body Large",size:"text-lg",pixels:"18px",usage:"Large body text"},{name:"Body",size:"text-base",pixels:"16px",usage:"Default body text"},{name:"Small",size:"text-sm",pixels:"14px",usage:"Captions, labels"}]};return e.jsxs("div",{className:"min-h-screen bg-white",children:[e.jsx(v,{}),e.jsx("div",{className:"pt-24 pb-20",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsxs("div",{className:"mb-16",children:[e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-6",children:[e.jsx("h1",{className:"text-5xl lg:text-6xl font-bold text-gray-900",children:"Brand Style Guide"}),e.jsxs(n,{onClick:N,variant:"outline",className:"print-hide flex items-center gap-2 border-2 border-primary text-primary hover:bg-blue-50 px-6 py-3 shrink-0","data-testid":"button-print-guide",children:[e.jsx(C,{className:"w-5 h-5"}),"Print Guide"]})]}),e.jsx("p",{className:"text-xl text-gray-600 max-w-3xl",children:"A comprehensive guide to Call Karma's visual identity, including colors, typography, logo usage, and design patterns."})]}),e.jsxs("section",{className:"mb-20",children:[e.jsx("h2",{className:"text-3xl font-bold text-gray-900 mb-6",children:"Brand Overview"}),e.jsx("div",{className:"bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl p-8",children:e.jsxs("div",{className:"grid md:grid-cols-2 gap-8",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Who We Are"}),e.jsx("p",{className:"text-gray-700 leading-relaxed mb-4",children:"Call Karma is an AI-powered call analytics platform that delivers actionable business intelligence daily to user inboxes, with urgent SMS alerts for time-sensitive opportunities."}),e.jsx("p",{className:"text-gray-700 leading-relaxed",children:"We target diverse industries like Real Estate, Healthcare, and Home Services, providing industry-specific ROI calculators and intelligence reports to enhance business performance."})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Brand Personality"}),e.jsxs("ul",{className:"space-y-2 text-gray-700",children:[e.jsxs("li",{className:"flex items-center",children:[e.jsx("div",{className:"w-2 h-2 bg-primary rounded-full mr-3"}),"Professional & Trustworthy"]}),e.jsxs("li",{className:"flex items-center",children:[e.jsx("div",{className:"w-2 h-2 bg-primary rounded-full mr-3"}),"Innovative & AI-Powered"]}),e.jsxs("li",{className:"flex items-center",children:[e.jsx("div",{className:"w-2 h-2 bg-primary rounded-full mr-3"}),"Action-Oriented & Results-Focused"]}),e.jsxs("li",{className:"flex items-center",children:[e.jsx("div",{className:"w-2 h-2 bg-primary rounded-full mr-3"}),"Industry-Specific & Adaptable"]})]})]})]})})]}),e.jsxs("section",{className:"mb-20",children:[e.jsx("h2",{className:"text-3xl font-bold text-gray-900 mb-6",children:"Logo"}),e.jsx("div",{className:"mb-8",children:e.jsxs("div",{className:"bg-white border-2 border-gray-200 rounded-xl p-8",children:[e.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-6",children:"Full Logo (Preferred)"}),e.jsxs(j,{defaultValue:"preview",className:"mb-6",children:[e.jsxs(y,{className:"grid w-full max-w-2xl grid-cols-3",children:[e.jsx(d,{value:"preview","data-testid":"tab-logo-preview",children:"Preview"}),e.jsx(d,{value:"svg","data-testid":"tab-logo-svg",children:"SVG Code"}),e.jsx(d,{value:"html","data-testid":"tab-logo-html",children:"HTML Code"})]}),e.jsx(x,{value:"preview",children:e.jsx("div",{className:"flex items-center justify-center py-12 bg-gray-50 rounded-lg",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("svg",{className:"w-12 h-12",viewBox:"0 0 128 128",xmlns:"http://www.w3.org/2000/svg",fill:"none",children:[e.jsx("rect",{width:"128",height:"128",rx:"24",fill:"transparent"}),e.jsx("path",{d:"M24 20C24 13.3726 29.3726 8 36 8H92C98.6274 8 104 13.3726 104 20V84C104 90.6274 98.6274 96 92 96H52L34 116V96H36C29.3726 96 24 90.6274 24 84V20Z",fill:"#3192F6"}
28),e.jsx("rect",{x:"40",y:"56",width:"8",height:"24",rx:"2",fill:"white"}),e.jsx("rect",{x:"54",y:"48",width:"8",height:"32",rx:"2",fill:"white"}),e.jsx("rect",{x:"68",y:"40",width:"8",height:"40",rx:"2",fill:"white"}),e.jsx("rect",{x:"82",y:"32",width:"8",height:"48",rx:"2",fill:"white"})]}),e.jsx("span",{className:"text-3xl font-bold text-gray-900",style:{fontFamily:"Poppins, sans-serif"},children:"Call Karma"})]})})}),e.jsx(x,{value:"svg",children:e.jsxs("div",{className:"bg-gray-900 rounded-lg p-4",children:[e.jsxs("div",{className:"flex justify-between items-center mb-3",children:[e.jsx("span",{className:"text-xs text-gray-400 font-mono",children:"Icon SVG Code"}),e.jsx("button",{onClick:()=>t(c,"icon-svg"),className:"flex items-center gap-2 text-xs bg-gray-800 hover:bg-gray-700 text-white px-3 py-1.5 rounded transition-colors","data-testid":"button-copy-icon-svg",children:a==="icon-svg"?e.jsxs(e.Fragment,{children:[e.jsx(l,{className:"w-3 h-3"}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsx(r,{className:"w-3 h-3"}),"Copy"]})})]}),e.jsx("pre",{className:"text-xs text-gray-300 font-mono overflow-x-auto bg-gray-950 rounded p-4",children:e.jsx("code",{children:c})})]})}),e.jsx(x,{value:"html",children:e.jsxs("div",{className:"bg-gray-900 rounded-lg p-4",children:[e.jsxs("div",{className:"flex justify-between items-center mb-3",children:[e.jsx("span",{className:"text-xs text-gray-400 font-mono",children:"Full Logo HTML"}),e.jsx("button",{onClick:()=>t(g,"full-logo-html"),className:"flex items-center gap-2 text-xs bg-gray-800 hover:bg-gray-700 text-white px-3 py-1.5 rounded transition-colors","data-testid":"button-copy-full-logo-html",children:a==="full-logo-html"?e.jsxs(e.Fragment,{children:[e.jsx(l,{className:"w-3 h-3"}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsx(r,{className:"w-3 h-3"}),"Copy"]})})]}),e.jsx("pre",{className:"text-xs text-gray-300 font-mono overflow-x-auto bg-gray-950 rounded p-4",children:e.jsx("code",{children:g})})]})})]}),e.jsx("p",{className:"text-sm text-gray-600 mb-6",children:"Full logo with icon and text - use for headers, presentations, and primary branding"}),e.jsxs("div",{className:"bg-blue-50 border border-blue-200 rounded-lg p-6",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-4",children:"Construction Specifications"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6 text-sm",children:[e.jsxs("div",{children:[e.jsx("h5",{className:"font-semibold text-gray-900 mb-3",children:"Text Specifications"}),e.jsxs("ul",{className:"space-y-2 text-gray-700",children:[e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Font Family:"})," Poppins"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Font Weight:"})," Bold (700)"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Font Size:"})," 30px"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Color (Light):"})," #1F2937 (Gray 900)"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Color (Dark):"})," #FFFFFF (White)"]})]})]}),e.jsxs("div",{children:[e.jsx("h5",{className:"font-semibold text-gray-900 mb-3",children:"Layout Specifications"}),e.jsxs("ul",{className:"space-y-2 text-gray-700",children:[e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Icon Size:"})," 48px à 48px"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Icon Color:"})," #3192F6 (Primary Blue)"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Icon-Text Gap:"})," 12px"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Alignment:"})," Vertically centered"]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium",children:"Total Height:"})," 48px"]})]})]})]})]})]})}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-8",children:[e.jsxs("div",{className:"bg-white border-2 border-gray-200 rounded-xl p-8",children:[e.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-6",children:"Icon Only"}),e.jsxs(j,{defaultValue:"preview",className:"mb-4",children:[e.jsxs(y,{className:"grid w-full grid-cols-2",children:[e.jsx(d,{value:"preview","data-testid":"tab-icon-preview",children:"Preview"}),e.jsx(d,{value:"svg","data-testid":"tab-icon-svg",children:"SVG Code"})]}),e.jsx(x,{value:"preview",children:e.jsx("div",{className:"flex items-center justify-center py-12 bg-gray-50 rounded-lg",children:e.jsxs("svg",{className:"w-16 h-16",viewBox:"0 0 128 128",xmlns:"http://www.w3.org/2000/svg",fill:"none",children:[e.jsx("rect",{width:"128",height:"128",rx:"24",fill:"transparent"}),e.jsx("path",{d:"M24 20C24 13.3726 29.3726 8 36 8H92C98.6274 8 104 13.3726 104 20V84C104 90.6274 98.6274 96 92 96H52L34 116V96H36C29.3726 96 24 90.6274 24 84V20Z",fill:"#3192F6"}
28),e.jsx("rect",{x:"40",y:"56",width:"8",height:"24",rx:"2",fill:"white"}),e.jsx("rect",{x:"54",y:"48",width:"8",height:"32",rx:"2",fill:"white"}),e.jsx("rect",{x:"68",y:"40",width:"8",height:"40",rx:"2",fill:"white"}),e.jsx("rect",{x:"82",y:"32",width:"8",height:"48",rx:"2",fill:"white"})]})})}),e.jsx(x,{value:"svg",children:e.jsxs("div",{className:"bg-gray-900 rounded-lg p-4",children:[e.jsxs("div",{className:"flex justify-between items-center mb-3",children:[e.jsx("span",{className:"text-xs text-gray-400 font-mono",children:"Icon SVG"}),e.jsx("button",{onClick:()=>t(c,"icon-only-svg"),className:"flex items-center gap-2 text-xs bg-gray-800 hover:bg-gray-700 text-white px-3 py-1.5 rounded transition-colors","data-testid":"button-copy-icon-only-svg",children:a==="icon-only-svg"?e.jsxs(e.Fragment,{children:[e.jsx(l,{className:"w-3 h-3"}),"Copied!"]}):e.jsxs(e.Fragment,{children:[e.jsx(r,{className:"w-3 h-3"}),"Copy"]})})]}),e.jsx("pre",{className:"text-xs text-gray-300 font-mono overflow-x-auto bg-gray-950 rounded p-4",children:e.jsx("code",{children:c})})]})})]}),e.jsx("p",{className:"text-sm text-gray-600",children:"Icon only - use for favicons, app icons, or when space is limited"})]}),e.jsxs("div",{className:"bg-gray-900 border-2 border-gray-800 rounded-xl p-8",children:[e.jsx("h3",{className:"text-lg font-semibold text-white mb-6",children:"Full Logo on Dark"}),e.jsx("div",{className:"flex items-center justify-center py-12 bg-gray-800 rounded-lg mb-6",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("svg",{className:"w-12 h-12",viewBox:"0 0 128 128",xmlns:"http://www.w3.org/2000/svg",fill:"none",children:[e.jsx("rect",{width:"128",height:"128",rx:"24",fill:"transparent"}),e.jsx("path",{d:"M24 20C24 13.3726 29.3726 8 36 8H92C98.6274 8 104 13.3726 104 20V84C104 90.6274 98.6274 96 92 96H52L34 116V96H36C29.3726 96 24 90.6274 24 84V20Z",fill:"#3192F6"}),e.jsx("rect",{x:"40",y:"56",width:"8",height:"24",rx:"2",fill:"white"}),e.jsx("rect",{x:"54",y:"48",width:"8",height:"32",rx:"2",fill:"white"}),e.jsx("rect",{x:"68",y:"40",width:"8",height:"40",rx:"2",fill:"white"}),e.jsx("rect",{x:"82",y:"32",width:"8",height:"48",rx:"2",fill:"white"})]}),e.jsx("span",{className:"text-3xl font-bold text-white",style:{fontFamily:"Poppins, sans-serif"},children:"Call Karma"})]})}),e.jsx("p",{className:"text-sm text-gray-400",children:"Full logo on dark backgrounds - maintains brand visibility"})]})]}),e.jsxs("div",{className:"mt-8 bg-amber-50 border border-amber-200 rounded-xl p-6",children:[e.jsx("h3",{className:"text-lg font-semibold text-amber-900 mb-4",children:"Logo Usage Guidelines"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-6 text-sm",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-green-700 mb-2",children:"â Do"}),e.jsxs("ul",{className:"space-y-1 text-gray-700",children:[e.jsx("li",{children:"⢠Maintain minimum clear space of 16px around logo"}),e.jsx("li",{children:"⢠Use on white, light gray, or dark backgrounds"}),e.jsx("li",{children:"⢠Scale proportionally when resizing"}),e.jsx("li",{children:"⢠Use SVG format for digital applications"})]})]}),e.jsxs("div",{children:[e.jsx("h4",{className:"font-semibold text-red-700 mb-2",children:"â Don't"}),e.jsxs("ul",{className:"space-y-1 text-gray-700",children:[e.jsx("li",{children:"⢠Change the logo colors"}),e.jsx("li",{children:"⢠Distort or skew the logo"}),e.jsx("li",{children:"⢠Add effects (shadows, outlines)"}),e.jsx("li",{children:"⢠Place on busy or low-contrast backgrounds"})]})]})]})]})]}),e.jsxs("section",{className:"mb-20",children:[e.jsx("h2",{className:"text-3xl font-bold text-gray-900 mb-6",children:"Color Palette"}),e.jsxs("div",{className:"mb-8",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Primary Colors"}),e.jsx("div",{className:"grid md:grid-cols-2 gap-4",children:o.primary.map(s=>e.jsx("div",{className:"bg-white border border-gray-200 rounded-xl p-6",children:e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx("div",{className:"w-20 h-20 rounded-lg shadow-md",style:{backgroundColor:s.hex}}),e.jsxs("div",{className:"flex-1 ml-6",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-1",children:s.name}),e.jsx("p",{className:"text-sm text-gray-600 mb-2",children:s.usage}),e.jsxs("div",{className:"flex gap-2",children:[e.jsxs("button",{onClick:()=>t(s.hex,s.name),className:"flex items-center gap-1 text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded transition-colors","data-testid":`button-copy-${i(s.name)}`,children:[a===s.name?e.jsx(l,{className:"w-3 h-3"}):e.jsx(r,{className:"w-3 h-3"}),s.hex]}),e.jsxs("button",{onClick:()=>t(s.hsl,`${s.name}-hsl`),className:"flex items-center gap-1 text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded transition-colors","data-testid":`button-copy-hsl-${i(s.name)}`,children:[a===`${s.name}-hsl`?e.jsx(l,{className:"w-3 h-3"}):e.jsx(r,{className:"w-3 h-3"}),"HSL: ",s.hsl]})]})]})]})},s.name))})]}),e.jsxs("div",{className:"mb-8",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Secondary Colors (Teal)"}),e.jsx("div",{className:"grid md:grid-cols-2 gap-4",children:o.secondary.map(s=>e.jsx("div",{className:"bg-white border border-gray-200 rounded-xl p-6",children:e.jsxs("div",{className:"flex items-center justify-between mb-4",children:[e.jsx("div",{className:"w-20 h-20 rounded-lg shadow-md",style:{backgroundColor:s.hex}}),e.jsxs("div",{className:"flex-1 ml-6",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-1",children:s.name}),e.jsx("p",{className:"text-sm text-gray-600 mb-2",children:s.usage}),e.jsx("div",{className:"flex gap-2",children:e.jsxs("button",{onClick:()=>t(s.hex,s.name),className:"flex items-center gap-1 text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded transition-colors","data-testid":`button-copy-${i(s.name)}`,children:[a===s.name?e.jsx(l,{className:"w-3 h-3"}):e.jsx(r,{className:"w-3 h-3"}),s.hex]})})]})]})},s.name))})]}),e.jsxs("div",{className:"mb-8",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Neutral Colors"}),e.jsx("div",{className:"grid md:grid-cols-2 lg:grid-cols-3 gap-4",children:o.neutral.map(s=>e.jsxs("div",{className:"bg-white border border-gray-200 rounded-xl p-4",children:[e.jsx("div",{className:"w-full h-16 rounded-lg shadow-md mb-3",style:{backgroundColor:s.hex}}),e.jsx("h4",{className:"font-semibold text-gray-900 text-sm mb-1",children:s.name}),e.jsx("p",{className:"text-xs text-gray-600 mb-2",children:s.usage}),e.jsxs("button",{onClick:()=>t(s.hex,s.name),className:"flex items-center gap-1 text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded transition-colors w-full justify-center","data-testid":`button-copy-${i(s.name)}`,children:[a===s.name?e.jsx(l,{className:"w-3 h-3"}):e.jsx(r,{className:"w-3 h-3"}),s.hex]})]},s.name))})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Gradients"}),e.jsx("div",{className:"space-y-4",children:o.gradients.map(s=>e.jsx("div",{className:"bg-white border border-gray-200 rounded-xl p-6",children:e.jsxs("div",{className:"flex items-center gap-6",children:[e.jsx("div",{className:"w-32 h-20 rounded-lg shadow-md",style:{background:s.value}}),e.jsxs("div",{className:"flex-1",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-1",children:s.name}),e.jsx("p",{className:"text-sm text-gray-600 mb-2",children:s.usage}),e.jsxs("button",{onClick:()=>t(s.value,s.name),className:"flex items-center gap-1 text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded transition-colors","data-testid":`button-copy-${i(s.name)}`,children:[a===s.name?e.jsx(l,{className:"w-3 h-3"}):e.jsx(r,{className:"w-3 h-3"}),s.value]})]})]})},s.name))})]})]}),e.jsxs("section",{className:"mb-20",children:[e.jsx("h2",{className:"text-3xl font-bold text-gray-900 mb-6",children:"Typography"}),e.jsxs("div",{className:"mb-8",children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Font Families"}),e.jsx("div",{className:"grid md:grid-cols-2 gap-6",children:p.fonts.map(s=>e.jsxs("div",{className:"bg-white border border-gray-200 rounded-xl p-6",children:[e.jsx("h4",{className:"text-2xl font-bold mb-2",style:{fontFamily:s.name},children:s.name}),e.jsx("p",{className:"text-sm text-gray-600 mb-3",children:s.usage}),e.jsxs("p",{className:"text-sm text-gray-500 mb-3",children:["Weights: ",s.weights]}),e.jsxs("a",{href:s.url,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center gap-2 text-sm text-primary hover:underline","data-testid":`link-google-fonts-${i(s.name)}`,children:[e.jsx(m,{className:"w-4 h-4"}),"View on Google Fonts"]})]},s.name))})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-xl font-semibold text-gray-900 mb-4",children:"Type Scale"}),e.jsx("div",{className:"bg-white border border-gray-200 rounded-xl p-6",children:e.jsx("div",{className:"space-y-6",children:p.scale.map(s=>e.jsxs("div",{className:"flex items-baseline justify-between border-b border-gray-100 pb-4 last:border-0",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("p",{className:`${s.size} font-bold text-gray-900 mb-1`,children:"Aa"}),e.jsx("p",{className:"text-sm text-gray-600",children:s.name})]}),e.jsxs("div",{className:"text-right",children:[e.jsx("p",{className:"text-sm font-mono text-gray-700",children:s.size}),e.jsx("p",{className:"text-xs text-gray-500",children:s.pixels}),e.jsx("p",{className:"text-xs text-gray-500",children:s.usage})]})]},s.name))})})]})]}),e.jsxs("section",{className:"mb-20",children:[e.jsx("h2",{className:"text-3xl font-bold text-gray-900 mb-6",children:"Button Styles"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-8",children:[e.jsxs("div",{className:"bg-white border border-gray-200 rounded-xl p-6",children:[e.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:"Primary Buttons"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(n,{className:"bg-primary hover:bg-blue-600 text-white px-8 py-3","data-testid":"button-preview-primary",children:"Primary Button"}),e.jsx("p",{className:"text-sm text-gray-600 mt-2",children:"Main CTAs, conversions"})]}),e.jsxs("div",{children:[e.jsx(n,{className:"bg-teal-600 hover:bg-teal-700 text-white px-8 py-3","data-testid":"button-preview-teal-primary",children:"Teal Primary"}),e.jsx("p",{className:"text-sm text-gray-600 mt-2",children:"AI/QA product CTAs"})]})]})]}),e.jsxs("div",{className:"bg-white border border-gray-200 rounded-xl p-6",children:[e.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:"Secondary Buttons"}),e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(n,{variant:"outline",className:"border-2 border-primary text-primary hover:bg-blue-50 px-8 py-3","data-testid":"button-preview-outline",children:"Outline Button"}),e.jsx("p",{className:"text-sm text-gray-600 mt-2",children:"Secondary actions"})]}),e.jsxs("div",{children:[e.jsx(n,{variant:"outline",className:"border-2 border-teal-600 text-teal-600 hover:bg-teal-50 px-8 py-3","data-testid":"button-preview-teal-outline",children:"Teal Outline"}),e.jsx("p",{className:"text-sm text-gray-600 mt-2",children:"AI/QA secondary actions"})]})]})]})]})]}),e.jsxs("section",{className:"mb-20",children:[e.jsx("h2",{className:"text-3xl font-bold text-gray-900 mb-6",children:"Brand Asset Downloads"}),e.jsx("div",{className:"bg-gradient-to-br from-teal-50 to-blue-50 rounded-2xl p-8",children:e.jsxs("div",{className:"grid md:grid-cols-3 gap-6",children:[e.jsxs("div",{className:"bg-white rounded-xl p-6",children:[e.jsx(m,{className:"w-8 h-8 text-primary mb-3"}),e.jsx("h3",{className:"font-semibold text-gray-900 mb-2",children:"Logo Package"}),e.jsx("p",{className:"text-sm text-gray-600 mb-4",children:"SVG logo files for web and print"}),e.jsx("p",{className:"text-xs text-gray-500",children:"Copy SVG code from Header.tsx component"})]}),e.jsxs("div",{className:"bg-white rounded-xl p-6",children:[e.jsx(m,{className:"w-8 h-8 text-primary mb-3"}),e.jsx("h3",{className:"font-semibold text-gray-900 mb-2",children:"Typography"}),e.jsx("p",{className:"text-sm text-gray-600 mb-4",children:"Google Fonts links"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("a",{href:"https://fonts.google.com/specimen/Inter",target:"_blank",rel:"noopener noreferrer",className:"block text-xs text-primary hover:underline","data-testid":"link-download-inter",children:"Inter â"}),e.jsx("a",{href:"https://fonts.google.com/specimen/Poppins",target:"_blank",rel:"noopener noreferrer",className:"block text-xs text-primary hover:underline","data-testid":"link-download-poppins",children:"Poppins â"})]})]}),e.jsxs("div",{className:"bg-white rounded-xl p-6",children:[e.jsx(m,{className:"w-8 h-8 text-primary mb-3"}),e.jsx("h3",{className:"font-semibold text-gray-900 mb-2",children:"Color Co
28des"}),e.jsx("p",{className:"text-sm text-gray-600 mb-4",children:"Export color values"}),e.jsx("p",{className:"text-xs text-gray-500",children:"Use copy buttons above to grab hex/HSL values"})]})]})})]}),e.jsxs("section",{children:[e.jsx("h2",{className:"text-3xl font-bold text-gray-900 mb-6",children:"Usage in Practice"}),e.jsxs("div",{className:"bg-white border border-gray-200 rounded-xl p-8",children:[e.jsx("p",{className:"text-gray-600 mb-6",children:"For implementation examples, refer to the following pages in the codebase:"}),e.jsxs("div",{className:"grid md:grid-cols-2 gap-4",children:[e.jsxs("div",{className:"bg-gray-50 rounded-lg p-4",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-2",children:"Primary Brand Colors"}),e.jsx("p",{className:"text-sm text-gray-600",children:"See: Homepage, Products pages"})]}),e.jsxs("div",{className:"bg-gray-50 rounded-lg p-4",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-2",children:"AI/QA Teal Theme"}),e.jsx("p",{className:"text-sm text-gray-600",children:"See: AI QA & Coaching pages"})]}),e.jsxs("div",{className:"bg-gray-50 rounded-lg p-4",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-2",children:"Button Styles"}),e.jsx("p",{className:"text-sm text-gray-600",children:"See: CTAButton component"})]}),e.jsxs("div",{className:"bg-gray-50 rounded-lg p-4",children:[e.jsx("h4",{className:"font-semibold text-gray-900 mb-2",children:"Typography Scale"}),e.jsx("p",{className:"text-sm text-gray-600",children:"See: All landing pages"})]})]})]})]})]})}),e.jsx(w,{})]})}export{H 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.