Skip to content

Sharpen MedTech regulated operations proof #77

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
romahawk merged 1 commit into from
Jul 31, 2026
Merged

Sharpen MedTech regulated operations proof #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 79 additions & 4 deletions src/assets/css/market-pages.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1165,14 +1165,16 @@
}

.medtech-impact-grid,
.medtech-regulated-proof-grid,
.medtech-proof-grid,
.medtech-capability-grid,
.medtech-role-grid {
display: grid;
gap: 16px;
}

.medtech-impact-grid {
.medtech-impact-grid,
.medtech-regulated-proof-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

Expand All @@ -1186,6 +1188,7 @@
}

.medtech-impact-card,
.medtech-regulated-proof-card,
.medtech-proof-card,
.medtech-capability-card,
.medtech-role-card,
Expand All @@ -1200,6 +1203,7 @@
}

.medtech-impact-card,
.medtech-regulated-proof-card,
.medtech-proof-card,
.medtech-capability-card,
.medtech-role-card {
Expand All @@ -1209,6 +1213,7 @@
}

.medtech-impact-card::before,
.medtech-regulated-proof-card::before,
.medtech-proof-card::before,
.medtech-capability-card::before,
.medtech-role-card::before {
Expand All @@ -1219,34 +1224,103 @@
background: linear-gradient(180deg, var(--accent-medtech), transparent);
}

.medtech-impact-card {
.medtech-impact-card,
.medtech-regulated-proof-card {
padding: 18px;
}

.medtech-impact-card span {
.medtech-regulated-proof-card {
display: grid;
align-content: start;
gap: 12px;
border-color: color-mix(in srgb, var(--accent-medtech) 28%, var(--system-border));
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(360px 170px at 100% 0, var(--accent-medtech-soft), transparent 70%),
color-mix(in srgb, var(--panel) 91%, transparent);
background-size: 24px 24px, 24px 24px, auto, auto;
}

.medtech-regulated-proof-card:nth-child(2) {
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(360px 170px at 100% 0, color-mix(in srgb, var(--accent-medtech-2) 12%, transparent), transparent 70%),
color-mix(in srgb, var(--panel) 91%, transparent);
}

.medtech-regulated-proof-card:nth-child(3) {
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(360px 170px at 100% 0, var(--accent-ai-soft), transparent 70%),
color-mix(in srgb, var(--panel) 91%, transparent);
}

.medtech-regulated-proof-card:nth-child(4) {
background:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
radial-gradient(360px 170px at 100% 0, var(--accent-fullstack-soft), transparent 70%),
color-mix(in srgb, var(--panel) 91%, transparent);
}

.medtech-regulated-proof-card:nth-child(2)::before {
background: linear-gradient(180deg, var(--accent-medtech-2), transparent);
}

.medtech-regulated-proof-card:nth-child(3)::before {
background: linear-gradient(180deg, var(--accent-ai), transparent);
}

.medtech-regulated-proof-card:nth-child(4)::before {
background: linear-gradient(180deg, var(--accent-fullstack), transparent);
}

.medtech-impact-card span,
.medtech-regulated-proof-card > span {
color: var(--accent-medtech);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
}

.medtech-impact-card h3,
.medtech-regulated-proof-card h3,
.medtech-proof-card h3,
.medtech-capability-card h3,
.medtech-role-card h3 {
margin: 8px 0 8px;
margin: 8px 0 0;
color: var(--text);
font-size: 17px;
line-height: 1.25;
}

.medtech-impact-card p,
.medtech-regulated-proof-card p,
.medtech-capability-card p {
margin: 0;
color: var(--muted);
line-height: 1.65;
}

.medtech-regulated-proof-card div {
display: grid;
gap: 5px;
margin-top: 2px;
padding-top: 12px;
border-top: 1px dashed var(--system-border);
}

.medtech-regulated-proof-card strong {
color: var(--accent-medtech);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.medtech-field-map {
display: grid;
gap: 10px;
Expand Down Expand Up @@ -1730,6 +1804,7 @@
.market-page__proof-grid,
.market-page__highlight-grid,
.medtech-impact-grid,
.medtech-regulated-proof-grid,
.medtech-proof-grid,
.medtech-capability-grid,
.medtech-role-grid,
Expand Down
109 changes: 27 additions & 82 deletions src/components/MarketPages.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,14 +299,6 @@ const aiFit = {
],
};

const medtechProof = [
"OR integration and surgical infrastructure",
"Surgimedia / Surgiris / Medintegro implementation context",
"Surgical lights and surgical video/audio workflows",
"Hospital stakeholder coordination, training, handover, and documentation",
"Multi-vendor delivery across medical equipment environments",
];

const medtechHeroWorkflow = [
{ label: "Clinical need", detail: "User, site, and workflow context" },
{ label: "Technical requirements", detail: "Devices, infrastructure, constraints" },
Expand All @@ -316,49 +308,26 @@ const medtechHeroWorkflow = [
{ label: "Workflow system", detail: "Product requirements, SOPs, visibility" },
];

const medtechImpact = [
const regulatedOperationsProof = [
{
title: "Clinical workflow understanding",
text: "Worked around real operating room and clinical environments where technical systems, clinicians, infrastructure, documentation, and handover have to work together.",
title: "Clinical workflow complexity",
body: "Experience with operating-room environments, clinical routines, handovers, and documentation.",
relevance: "Designs that respect real workflow constraints.",
},
{
title: "Multi-stakeholder coordination",
text: "Coordinated across clinicians, hospital teams, biomedical engineers, suppliers, service partners, and international manufacturers.",
body: "Work across clinicians, hospital teams, vendors, suppliers, and internal teams.",
relevance: "Systems that support adoption, ownership, and review.",
},
{
title: "Implementation-to-handover thinking",
text: "Supported the transition from requirements and installation planning to training, documentation, operational use, and post-handover support.",
title: "Implementation & handover thinking",
body: "From requirements and installation planning to training, documentation, and post-handover support.",
relevance: "Pilots that can become usable operational systems.",
},
{
title: "Product / workflow translation",
text: "Translates field implementation complexity into product requirements, workflow maps, dashboards, SOP logic, and AI-assisted delivery concepts.",
},
];

const medtechFieldContexts = [
{
fieldContext: "OR integration and surgical workflow systems",
productRelevance: "workflow ownership, stakeholder alignment, handover risk",
},
{
fieldContext: "Surgical video / audio workflows",
productRelevance: "data capture, documentation, interoperability, clinical usability",
},
{
fieldContext: "Surgical lights and OR equipment context",
productRelevance: "requirements, constraints, training, post-handover support",
},
{
fieldContext: "Medical equipment implementation",
productRelevance: "implementation planning, dependencies, acceptance, supportability",
},
{
fieldContext: "Hospital stakeholder coordination",
productRelevance: "alignment across clinicians, technical teams, suppliers, and decision-makers",
},
{
fieldContext: "Training, handover, documentation, support logic",
productRelevance: "structured operating memory, SOPs, onboarding, workflow state visibility",
title: "Documentation & knowledge transfer",
body: "Turning scattered implementation context into structured procedures, notes, and support logic.",
relevance: "Strong fit for SOPs, internal assistants, and decision-support tools.",
},
];

Expand Down Expand Up @@ -673,14 +642,18 @@ function HomeHeroVisual() {
);
}

function MedTechImpactGrid({ items }) {
function RegulatedOperationsProofGrid({ items }) {
return (
<div className="medtech-impact-grid">
<div className="medtech-regulated-proof-grid">
{items.map((item, index) => (
<article className="medtech-impact-card reveal" key={item.title}>
<article className="medtech-regulated-proof-card reveal" key={item.title}>
<span>{String(index + 1).padStart(2, "0")}</span>
<h3>{item.title}</h3>
<p>{item.text}</p>
<p>{item.body}</p>
<div>
<strong>AI relevance</strong>
<p>{item.relevance}</p>
</div>
</article>
))}
</div>
Expand Down Expand Up @@ -711,26 +684,6 @@ function WorkflowBeforeAfter({ before, after }) {
);
}

function FieldContextMap({ items }) {
return (
<div className="medtech-field-map reveal">
{items.map((item) => (
<article className="medtech-field-row" key={item.fieldContext}>
<div>
<span>Field context</span>
<strong>{item.fieldContext}</strong>
</div>
<ArrowRight size={16} aria-hidden="true" />
<div>
<span>Product relevance</span>
<p>{item.productRelevance}</p>
</div>
</article>
))}
</div>
);
}

function CapabilityToolMatrix({ items }) {
return (
<div className="ai-tool-matrix reveal">
Expand Down Expand Up @@ -1229,11 +1182,13 @@ export function AIPage() {
}

export function MedTechPage() {
const medtechTitle = "MedTech and Regulated Operations Proof";

return (
<div className="market-page market-page--medtech">
<PageHero
eyebrow="Trust layer / regulated operations"
title="MedTech and Regulated Operations Proof"
title={<TypewriterTitle text={medtechTitle} />}
subtitle="Real MedTech implementation experience translated into AI workflow consulting judgment: clinical context, stakeholder coordination, documentation, handover, risk boundaries, and practical implementation thinking."
primaryCta={{ label: "View Selected Proof", href: "#medtech-proof" }}
secondaryCta={{ label: "Book an AI Workflow Audit", href: `mailto:${EMAIL}?subject=AI%20Workflow%20Audit%20Request`, icon: <Mail size={15} className="icon ml-1" aria-hidden="true" /> }}
Expand All @@ -1247,21 +1202,11 @@ export function MedTechPage() {

<section id="medtech-impact" className="section container market-page__section">
<SectionHeader
eyebrow="Impact snapshot"
title="Implementation experience with product impact"
text="The strongest signal is practical delivery context: clinical workflows, technical constraints, stakeholders, documentation, and handover translated into product/project judgment."
/>
<MedTechImpactGrid items={medtechImpact} />
</section>

<section className="section container market-page__section">
<SectionHeader
eyebrow="Implementation proof"
title="Real-world MedTech implementation context"
text="My MedTech background comes from practical implementation work: operating room systems, medical equipment workflows, hospital stakeholders, supplier coordination, installation support, training, and handover."
eyebrow="Regulated operations proof"
title="Why my MedTech background matters for AI workflow systems"
text="AI systems fail when they ignore real-world constraints: handovers, stakeholders, documentation, exceptions, training, and review points. My MedTech implementation background helps me design workflows that fit how teams actually work."
/>
<FieldContextMap items={medtechFieldContexts} />
<PillList items={medtechProof} accent="medtech" />
<RegulatedOperationsProofGrid items={regulatedOperationsProof} />
</section>

<section id="medtech-proof" className="section container market-page__section">
Expand Down
Loading