From aa7497c1519812fccfad58b63d313fc02e80486f Mon Sep 17 00:00:00 2001 From: Roman Mazuryk Date: Mon, 3 Aug 2026 20:00:55 +0200 Subject: [PATCH 1/2] feat: deep link medtech workflow cards --- src/assets/css/ai-workflow-library.css | 51 ++++++++++++++-- src/components/AIWorkflowLibrary.jsx | 80 ++++++++++++++++++++------ src/components/MarketPages.jsx | 4 +- src/data/aiWorkflows.js | 34 +++++++++++ 4 files changed, 146 insertions(+), 23 deletions(-) diff --git a/src/assets/css/ai-workflow-library.css b/src/assets/css/ai-workflow-library.css index 596b4d3..ee608aa 100644 --- a/src/assets/css/ai-workflow-library.css +++ b/src/assets/css/ai-workflow-library.css @@ -146,7 +146,7 @@ .ai-workflow-page__featured { display: grid; - grid-template-columns: minmax(0, 1fr) minmax(260px, 0.46fr); + grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } @@ -250,8 +250,8 @@ .ai-workflow-card { display: grid; - gap: 14px; - padding: 16px; + gap: 16px; + padding: 20px; align-content: start; } @@ -433,6 +433,10 @@ gap: 12px; } +.ai-workflow-card__systems--expanded { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + .ai-workflow-card__systems div { padding: 12px; border: 1px solid var(--surface-border); @@ -455,6 +459,44 @@ line-height: 1.45; } +.ai-workflow-card__full-flow { + display: grid; + gap: 10px; + padding: 12px; + border: 1px solid var(--surface-border); + border-radius: 12px; + background: + radial-gradient(420px 160px at 100% 0, var(--surface-glow), transparent 72%), + var(--surface-soft); +} + +.ai-workflow-card__full-flow > span { + color: var(--brand); + font-size: 11px; + font-weight: 800; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.ai-workflow-card__full-flow ol { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 8px; + margin: 0; + padding: 0; + list-style: none; +} + +.ai-workflow-card__full-flow li { + min-height: 54px; + padding: 10px; + border: 1px solid var(--tag-border); + border-radius: 10px; + background: var(--tag-bg); + color: var(--muted-strong); + line-height: 1.45; +} + .ai-workflow-card__trace { display: grid; gap: 10px; @@ -487,7 +529,8 @@ max-width: 100%; } - .ai-workflow-card__systems { + .ai-workflow-card__systems, + .ai-workflow-card__systems--expanded { grid-template-columns: 1fr; } diff --git a/src/components/AIWorkflowLibrary.jsx b/src/components/AIWorkflowLibrary.jsx index 32c998a..b68c240 100644 --- a/src/components/AIWorkflowLibrary.jsx +++ b/src/components/AIWorkflowLibrary.jsx @@ -1,4 +1,4 @@ -import React, { useMemo, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; import { ArrowRight, ClipboardCheck, @@ -58,6 +58,9 @@ function WorkflowCard({ workflow }) { const auditabilityFeatures = getWorkflowArray(t, workflow, "auditabilityFeatures", workflow.auditabilityFeatures); const expectedBusinessValue = getWorkflowArray(t, workflow, "expectedBusinessValue", workflow.expectedBusinessValue); const bottlenecks = getWorkflowArray(t, workflow, "bottlenecks", workflow.currentWorkflow.bottlenecks); + const currentSteps = getWorkflowArray(t, workflow, "currentSteps", workflow.currentWorkflow.steps); + const aiSteps = getWorkflowArray(t, workflow, "aiSteps", workflow.aiAssistedWorkflow.steps); + const aiAssists = getWorkflowArray(t, workflow, "aiAssists", workflow.aiAssistedWorkflow.aiAssists); return (

{t("site.aiWorkflow.labels.components")}

{t("site.aiWorkflow.labels.review")}

    - {humanReviewPoints.slice(0, 4).map((item) =>
  • {item}
    • )} + {humanReviewPoints.map((item) =>
  • {item}
    • )}
+
+
+

{t("site.aiWorkflow.detail.manualSteps")}

+
    + {currentSteps.map((item) =>
  • {item}
    • )} +
+
+
+

{t("site.aiWorkflow.detail.aiAssists")}

+
    + {aiAssists.map((item) =>
  • {item}
    • )} +
+
+
+ +
+ {t("site.aiWorkflow.detail.aiTitle")} +
    + {aiSteps.map((item) =>
  1. {item}
    2. )} +
+
+
{t("site.aiWorkflow.labels.traceability")} -

{auditabilityFeatures.slice(0, 4).join(", ")}.

+

{auditabilityFeatures.join(", ")}.

{t("site.aiWorkflow.labels.value")} -

{expectedBusinessValue.slice(0, 4).join(", ")}.

+

{expectedBusinessValue.join(", ")}.

@@ -139,9 +164,10 @@ export default function AIWorkflowLibrary() { const [domainFilter, setDomainFilter] = useState("All"); const [statusFilter, setStatusFilter] = useState("All"); const [problemFilter, setProblemFilter] = useState("All"); + const [selectedWorkflowSlug, setSelectedWorkflowSlug] = useState(""); const selectedCategory = workflowCategories.find((category) => category.title === activeCategory) || workflowCategories[0]; - const featuredWorkflow = selectedCategory?.workflows[0]; - const otherWorkflows = selectedCategory?.workflows.slice(1) || []; + const selectedWorkflow = aiWorkflowExamples.find((workflow) => workflow.slug === selectedWorkflowSlug); + const featuredWorkflow = selectedWorkflow?.category === selectedCategory?.title ? selectedWorkflow : selectedCategory?.workflows[0]; const domains = useMemo(() => ["All", ...new Set(aiWorkflowExamples.map((workflow) => workflow.category))], []); const statuses = useMemo(() => ["All", ...new Set(aiWorkflowExamples.map((workflow) => workflow.status))], []); const problemTypes = ["All", "Traceability", "Handover", "Coordination", "Documentation", "Automation"]; @@ -156,6 +182,29 @@ export default function AIWorkflowLibrary() { .slice(0, 4); const heroTitle = t("site.aiWorkflow.hero.title"); + useEffect(() => { + if (typeof window === "undefined") return; + + const syncSelectedWorkflow = () => { + const slug = window.location.hash.replace("#", ""); + const workflow = aiWorkflowExamples.find((item) => item.slug === slug); + if (!workflow) return; + setSelectedWorkflowSlug(workflow.slug); + setActiveCategory(workflow.category); + }; + + syncSelectedWorkflow(); + window.addEventListener("hashchange", syncSelectedWorkflow); + return () => window.removeEventListener("hashchange", syncSelectedWorkflow); + }, []); + + useEffect(() => { + if (!selectedWorkflowSlug || featuredWorkflow?.slug !== selectedWorkflowSlug) return; + window.requestAnimationFrame(() => { + document.getElementById(selectedWorkflowSlug)?.scrollIntoView({ block: "start" }); + }); + }, [featuredWorkflow?.slug, selectedWorkflowSlug]); + return (
setActiveCategory(category.title)} + onClick={() => { + setSelectedWorkflowSlug(""); + setActiveCategory(category.title); + if (typeof window !== "undefined" && window.location.hash) { + window.history.replaceState(null, "", window.location.pathname); + } + }} key={category.title} > {t(`site.aiWorkflow.categories.${category.title}`) === `site.aiWorkflow.categories.${category.title}` @@ -207,15 +262,6 @@ export default function AIWorkflowLibrary() { {featuredWorkflow ? (
-
) : null} diff --git a/src/components/MarketPages.jsx b/src/components/MarketPages.jsx index aefe299..faab918 100644 --- a/src/components/MarketPages.jsx +++ b/src/components/MarketPages.jsx @@ -360,7 +360,7 @@ const medtechSelectedProof = [ system: "Designed an AI-assisted workflow to structure requirements, missing documents, risks, meeting summaries, and customer handover.", proof: "Workflow map / product specification / reference system.", relevance: "Internal Assistant and implementation handover proof connected to the AI Workflow Audit path.", - links: [{ label: "View workflow library", href: "/ai-workflow" }], + links: [{ label: "View workflow library", href: "/ai-workflow#medtech-implementation-handoff-assistant" }], }, { title: "MedTech Operations Knowledge / Workflow OS", @@ -369,7 +369,7 @@ const medtechSelectedProof = [ system: "Designed a structured knowledge and workflow system for products, projects, SOPs, onboarding, and handover.", proof: "Concept, data model, prototype direction, and documentation artifact.", relevance: "Workflow Automation, SOP system, and reporting/visibility proof for regulated operations.", - links: [{ label: "Explore workflows", href: "/ai-workflow" }], + links: [{ label: "Explore workflows", href: "/ai-workflow#medtech-operations-knowledge-workflow-os" }], }, ]; diff --git a/src/data/aiWorkflows.js b/src/data/aiWorkflows.js index aec5d12..d06b7bd 100644 --- a/src/data/aiWorkflows.js +++ b/src/data/aiWorkflows.js @@ -101,6 +101,40 @@ export const aiWorkflowExamples = [ relatedServices: ["Compliance-Aware Automation Setup", "AI Workflow Opportunity Audit", "Prototype Sprint"], relatedProofItems: ["Regulated Documentation & SOP Assistant", "AI-Generated SOP System"], }, + { + slug: "medtech-operations-knowledge-workflow-os", + visibility: "primary", + title: "MedTech Operations Knowledge / Workflow OS", + status: "Reference System", + category: "Operations / Implementation Workflows", + domain: "Product knowledge, SOPs, onboarding, supplier context, implementation handover", + icon: "Network", + summary: + "A structured operating system concept for keeping MedTech product data, project knowledge, SOPs, onboarding materials, and handover context connected.", + audience: ["MedTech operations teams", "Implementation leads", "Product managers", "Support teams", "Supplier coordinators"], + problem: + "Product data, project knowledge, SOPs, supplier information, and onboarding materials become fragmented over time.", + currentWorkflow: { + steps: ["Store product notes in separate files", "Track project context in emails", "Update SOPs manually", "Onboard from scattered documents", "Rebuild supplier context repeatedly"], + tools: ["Shared drives", "Spreadsheets", "Email", "Notion or docs", "Supplier PDFs", "Task boards"], + bottlenecks: ["Fragmented knowledge", "Repeated questions", "Weak ownership", "Slow onboarding", "Stale SOPs"], + ownershipGaps: ["Product knowledge owner", "SOP owner", "Supplier data owner", "Implementation handover owner"], + documentationGaps: ["Source links", "Update rationale", "Supplier constraints", "Training state", "Handover history"], + }, + aiAssistedWorkflow: { + steps: ["Ingest product and project context", "Structure reusable knowledge objects", "Link SOPs to source notes", "Surface onboarding paths", "Generate handover-ready summaries"], + aiAssists: ["Knowledge classification", "SOP drafting", "Gap detection", "Supplier context summarization", "Onboarding guide generation"], + automatedParts: ["Draft knowledge records", "Duplicate detection", "Missing-context flags", "Summary generation", "Update reminders"], + manualControls: ["Process owner approval", "Quality review", "Supplier detail confirmation", "Final handover sign-off"], + }, + systemComponents: ["Product knowledge base", "Project context registry", "SOP library", "Supplier record layer", "Onboarding paths", "Handover export", "Review queue"], + humanReviewPoints: ["Product owner review", "SOP owner approval", "Supplier context confirmation", "Implementation lead handover"], + auditabilityFeatures: ["Source traceability", "Owner history", "Versioned SOP records", "Review checkpoints", "Handover logs", "Supplier reference links"], + expectedBusinessValue: ["Faster onboarding", "Reduced repeated work", "Better documentation readiness", "Lower coordination risk", "Improved operational visibility"], + artifactPlaceholders: ["Knowledge model", "Workflow map", "SOP library mockup", "Supplier registry", "Onboarding dashboard", "Implementation roadmap"], + relatedServices: ["Knowledge & SOP System", "AI Workflow Opportunity Audit", "Prototype Sprint"], + relatedProofItems: ["MedTech Operations Knowledge / Workflow OS", "Regulated Documentation & SOP Assistant"], + }, { slug: "or-workflow-optimization", visibility: "primary", From ce0037406552f81b5fd2cf086b7848ead250aba1 Mon Sep 17 00:00:00 2001 From: Roman Mazuryk Date: Tue, 4 Aug 2026 09:58:19 +0200 Subject: [PATCH 2/2] fix: serve route-specific og previews --- ai-workflow/index.html | 4 +- ai/index.html | 45 ++++++++++++++++++ collaborate/index.html | 4 +- fullstack/index.html | 45 ++++++++++++++++++ index.html | 4 +- .../clinical-evidence-workflow/index.html | 45 ++++++++++++++++++ medtech/index.html | 45 ++++++++++++++++++ proof-of-work/or-integration/index.html | 4 +- public/images/og-ai-workflows.png | Bin 122221 -> 0 bytes public/images/og-home.png | Bin 155560 -> 0 bytes public/images/og-services.png | Bin 187852 -> 0 bytes public/images/og/og-ai-workflows.png | Bin 0 -> 145028 bytes public/images/og/og-ai.png | Bin 0 -> 186075 bytes public/images/og/og-fullstack.png | Bin 0 -> 178977 bytes public/images/og/og-home.png | Bin 0 -> 155709 bytes public/images/{ => og}/og-livesurgery.jpg | Bin public/images/og/og-medtech.png | Bin 0 -> 161928 bytes public/images/{ => og}/og-or_workflow.png | Bin public/livesurgery/index.html | 4 +- public/projects/livesurgery/index.html | 4 +- services/index.html | 10 ++-- src/hooks/useOgMeta.js | 18 +++---- vercel.json | 16 +++---- vite.config.js | 4 ++ 24 files changed, 218 insertions(+), 34 deletions(-) create mode 100644 ai/index.html create mode 100644 fullstack/index.html create mode 100644 medtech-ai-systems/clinical-evidence-workflow/index.html create mode 100644 medtech/index.html delete mode 100644 public/images/og-ai-workflows.png delete mode 100644 public/images/og-home.png delete mode 100644 public/images/og-services.png create mode 100644 public/images/og/og-ai-workflows.png create mode 100644 public/images/og/og-ai.png create mode 100644 public/images/og/og-fullstack.png create mode 100644 public/images/og/og-home.png rename public/images/{ => og}/og-livesurgery.jpg (100%) create mode 100644 public/images/og/og-medtech.png rename public/images/{ => og}/og-or_workflow.png (100%) diff --git a/ai-workflow/index.html b/ai-workflow/index.html index fe05e1e..41ba2f3 100644 --- a/ai-workflow/index.html +++ b/ai-workflow/index.html @@ -19,7 +19,7 @@ - + - + + + +
+ + + diff --git a/collaborate/index.html b/collaborate/index.html index c846ffd..907493d 100644 --- a/collaborate/index.html +++ b/collaborate/index.html @@ -19,7 +19,7 @@ - + - + + + +
+ + + diff --git a/index.html b/index.html index d53434b..203e433 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ - + - + + + +
+ + + diff --git a/medtech/index.html b/medtech/index.html new file mode 100644 index 0000000..b504988 --- /dev/null +++ b/medtech/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + MedTech and Regulated Operations Proof - Roman Mazuryk + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/proof-of-work/or-integration/index.html b/proof-of-work/or-integration/index.html index d8e66af..57eb38e 100644 --- a/proof-of-work/or-integration/index.html +++ b/proof-of-work/or-integration/index.html @@ -21,7 +21,7 @@ property="og:description" content="Real-world MedTech implementation experience across operating room infrastructure, surgical equipment integration, video/audio workflows, clinical handover, and hospital stakeholder coordination." /> - + - + diff --git a/services/index.html b/services/index.html index c846ffd..37628f9 100644 --- a/services/index.html +++ b/services/index.html @@ -7,7 +7,7 @@ - + AI-Assisted Workflow Collaboration for MedTech Teams - + - + - + - +