// shared.jsx — copy, data, and shared visual primitives for all three directions. // All values lifted from the Homepage Copy Brief v1.0 + Positioning Frame v1.1. // Real numbers are placeholders flagged TBD per brief. const COPY = { tagline: "The IT department of the future, built for you.", subhead: "There’s the technology that runs your business, and the technology that helps it grow. We do both — and we’re equipped for the regulatory frameworks that gate doing business in the industries that matter most.", primaryCta: { label: "Start a conversation", href: "#contact" }, secondaryCta: { label: "See how we work", href: "#how-we-work" }, // Section 3 — structural claim (founder voice, plainspoken) claimEyebrow: "Two halves, one team.", claimBody: [ "Most MSPs run things. Most consultancies build things. Almost nobody does both — and the gap between them is where every IT problem lives.", "We do both. The team that keeps your endpoints alive is the same team that ships your Power BI rollout, your Business Central migration, your Copilot governance. The strategy holds together because the same people own it.", "And we’re equipped for the regulatory frameworks — FDA, CMMC, HIPAA, SOC 2 — where doing business depends on getting compliance right. Not as a checkbox feature. As a primary practice area.", ], // Section 8 — flexibility differentiator (commitments, not prose) flexHeader: "Here’s how we engage — on your terms, not ours.", flex: [ "No minimum entry point.", "No long-term contracts.", "Project-only is fine.", "Already have an MSP? Keep them. We work alongside.", ], // Section 9 — closing CTA closingHeader: "Start a conversation.", closingFraming: "Different situations need different conversations. Pick the path that fits — we’ll route from there.", trustLine: "When you submit, your message lands with Armin or Jack directly — not a queue. We aim to respond within one business day.", }; // Real-stat placeholders — TODO: replace with confirmed numbers (see brief §11 open Qs) const STATS = [ { value: "150+", label: "Implementations shipped", note: "BC · D365 · Power BI · Copilot" }, { value: "30,000+", label: "Endpoints under management" }, { value: "60+", label: "Active client engagements" }, { value: "120+", label: "Years of collective IT leadership" }, ]; // Four-verb taxonomy. `verb` is the cover side of the nav flip, // `name` is the practice area revealed on hover. const HUBS = [ { id: "run", verb: "Run", name: "IT Operations", blurb: "The technology that runs your business.", items: ["Managed IT", "Co-Managed IT", "Microsoft 365"], href: "pages/run.html", }, { id: "grow", verb: "Grow", name: "Enterprise Apps", blurb: "The systems your business runs on.", items: ["Dynamics 365 CRM", "Dynamics 365 ERP", "Business Central", "Power BI & Fabric"], href: "pages/grow.html", }, { id: "automate", verb: "Automate", name: "AI & Workflows", blurb: "The intelligence and automation layer most providers miss.", items: ["AI Implementation", "Workflow Automation", "Power Automate", "Power Platform"], href: "pages/automate.html", }, { id: "align", verb: "Align", name: "Compliance", blurb: "The regulatory frameworks that gate doing business in regulated industries.", items: ["FDA", "HIPAA", "FTC Safeguards", "CMMC", "SEC", "FINRA"], href: "pages/align.html", }, ]; // Anonymized client placeholders — fake-but-plausible industry labels per direction. const CLIENT_LOGOS = [ { name: "Midwest Industrial", kind: "REAL ESTATE" }, { name: "Lakeshore Biotech", kind: "BIOTECH" }, { name: "Northridge Health", kind: "HEALTHCARE" }, { name: "Riverline Logistics", kind: "LOGISTICS" }, { name: "Coastal Pharma", kind: "PHARMA" }, { name: "Beacon Insurance", kind: "INSURANCE" }, { name: "Aspen Water Group", kind: "INFRASTRUCTURE" }, ]; // Featured case study — Becknell stand-in (anonymized; real numbers TBD) const CASE_STUDY = { client: "Midwest Industrial", vertical: "Commercial Real Estate", outcome: "Replaced 14 stitched-together Excel reports with one Power BI + Fabric platform their tenants actually log into.", narrative: "They were sending a different spreadsheet to every investor and reconciling four systems by hand. We rebuilt the pipeline in Fabric, productized the reporting layer in Power BI, and gave their finance team back two days a month. The platform now ships as part of the tenant experience.", metrics: [ { v: "14 → 1", l: "reports consolidated" }, { v: "2 days", l: "monthly finance hours back" }, { v: "100%", l: "tenant-facing portal coverage" }, ], href: "#work-midwest", }; const FOUNDERS = [ { name: "Armin Ghazi", role: "Chief Revenue Officer", line: "Leads how Wired CIO operates with clients — discovery, diagnosis, proposals. Prior commercial leadership across RevOps and Microsoft platform engagements.", initials: "AG", }, { name: "Phil Bueschel", role: "Co-Founder, CTO", line: "Technical authority behind Run-side operations and Microsoft platform depth. Prior IT leadership across multi-site, regulated, and high-availability environments.", initials: "PB", }, { name: "Russell Meade", role: "Founder, CEO", line: "Technical leadership across enterprise data, AI, and the Microsoft data stack — informs how we think about the Grow side.", initials: "RM", }, { name: "Jack Snellgrove", role: "Co-Founder, Sales Operations", line: "The engine behind the engine — runs the operational layer that makes every meeting, handoff, and follow-up land cleanly.", initials: "JS", }, ]; const INSIGHTS = [ { tag: "PERSPECTIVE", author: "Armin Ghazi", title: "The MSP industry’s Grow-side problem", excerpt: "Most providers learned to spell ‘Power BI’ for the website. The work shows it. A field guide to telling the difference.", minutes: 7, }, { tag: "PERSPECTIVE", author: "Phil Bueschel", title: "Monitoring something is not operating it", excerpt: "What most MSPs miss about Run-side excellence — and how to evaluate whether yours is keeping up.", minutes: 5, }, { tag: "FIELD NOTE", author: "Wired CIO", title: "What Copilot governance actually requires before rollout", excerpt: "Content governance, security model, training, change management. Skip any one and the rollout is theater.", minutes: 9, }, { tag: "ANALYSIS", author: "Wired CIO", title: "Reading a Microsoft Solutions Partner badge honestly", excerpt: "Six designations, varying weight. What they prove, what they don’t, and what to ask before you trust one.", minutes: 6, }, ]; const INTENT_PATHS = [ { label: "I’m exploring a project or implementation", q: "project" }, { label: "I need ongoing IT operations", q: "operations" }, { label: "I want strategic advisory", q: "advisory" }, { label: "I’m renewing or changing Microsoft 365 / CSP", q: "m365-csp" }, { label: "I need help with compliance", q: "compliance" }, { label: "I want to talk about something else", q: "general" }, { label: "I’m a partner, vendor, or referrer", q: "partner" }, ]; // Primary nav now mirrors the four-verb hubs; secondary items follow. const NAV = HUBS.map((h) => ({ label: h.verb, flipTo: h.name, href: h.href, items: h.items })); const NAV_SECONDARY = [ { label: "Insights", href: "#insights" }, { label: "About", href: "#about" }, ]; // Microsoft Solutions Partner badge placeholders — reserved space per brief const MS_BADGES = [ "MODERN WORK", "BUSINESS APPLICATIONS", "DATA & AI", "INFRASTRUCTURE", ]; // ───────────────────────────────────────────────────────────────────────────── // Shared visual primitives (intentionally style-light; each direction overrides) // ───────────────────────────────────────────────────────────────────────────── // Anonymized client logo block — geometric mark + wordmark, monochrome function ClientLogo({ name, kind, mono = "currentColor", mark, font, size = 1 }) { // Generate a deterministic mark from the name (rect / circle / chevron / triangle) const seed = name.charCodeAt(0) + name.length; const variants = [ // Concentric rings , // Chevron stack , // Square in square , // Diagonal slabs , // Triangle + dot , // Dot grid {[0, 1, 2, 3].map((r) => [0, 1, 2, 3].map((c) => ( )) )} , // Bar block , ]; const mark2 = variants[seed % variants.length]; return (
{name}
); } // Placeholder portrait — geometric, deterministic from initials. Reserves the // real-photo aspect ratio (4:5). function PortraitPlaceholder({ initials, bg, fg, ratio = "4 / 5", note }) { return (
{/* subtle stripe pattern so it doesn't read as a final photo */}
{note || "PORTRAIT · TBD"}
{initials}
); } // Subtle horizontal rule — direction-tunable function Rule({ color, weight = 1, style }) { return (
); } // FlipNavLink — vertical card flip from verb (front) to practice-area name // (back) on hover. Pure CSS transform; no JS needed beyond passing props. function FlipNavLink({ verb, flipTo, href, color, hoverColor, mute, font, height = 60, padX = 14, fontSize = 13, weight = 500 }) { return ( {verb} {flipTo} {/* invisible spacer reserves the wider of the two labels */} ); } // Inject flip CSS once if (typeof document !== "undefined" && !document.getElementById("wcio-flip-style")) { const s = document.createElement("style"); s.id = "wcio-flip-style"; s.textContent = ` .wcio-flip:hover .wcio-flip-inner{ transform: rotateX(-180deg); } .wcio-flip-inner{ will-change: transform; } `; document.head.appendChild(s); } Object.assign(window, { COPY, STATS, HUBS, CLIENT_LOGOS, CASE_STUDY, FOUNDERS, INSIGHTS, INTENT_PATHS, NAV, NAV_SECONDARY, MS_BADGES, ClientLogo, PortraitPlaceholder, Rule, FlipNavLink, });