// ServicePage.jsx — shared template for individual service detail pages // Renders: hero with attack-mockup, what-we-test grid, methodology, deliverables, FAQ, CTA const ServiceHero = ({ tag, title, lead, bullets, mockup }) => (
{tag}

{title}

{lead}

{bullets.map(b => (
{b}
))}
{mockup}
); // Generic test-vectors grid const TestVectors = ({ title, subtitle, vectors }) => (

Attack vectors

{title}

{subtitle}

{vectors.map(v => (
{ e.currentTarget.style.background = '#141516'; e.currentTarget.style.borderColor = '#34343a'; }} onMouseLeave={e => { e.currentTarget.style.background = '#0f1011'; e.currentTarget.style.borderColor = '#23252a'; }} >
{v.id}

{v.t}

{v.d}

))}
); // Phase ribbon for service-specific methodology const PhaseRibbon = ({ phases }) => (

Engagement flow

How an engagement runs

{phases.map((p, i) => (
{(i + 1).toString().padStart(2, '0')}
{p.dur}

{p.t}

{p.d}

))}
); // Deliverables section const Deliverables = ({ items }) => (

What you receive

Deliverables

Every engagement includes an executive report, a technical report, and the evidence your engineers need to reproduce each finding.

{items.map((d, i) => (

{d.t}

{d.format}

{d.d}

))}
); // Stats strip for service const ServiceStats = ({ stats }) => (
{stats.map((s, i) => (
{s.v}
{s.l}
{s.s}
))}
); // Service-specific FAQ const ServiceFaq = ({ items }) => { const [open, setOpen] = React.useState(0); return (

Common questions

Frequently asked questions

{items.map((it, i) => (

{it.a}

))}
); }; // Closing CTA strip const ServiceClose = ({ title, body }) => (

{title}

{body}

); Object.assign(window, { ServiceHero, TestVectors, PhaseRibbon, Deliverables, ServiceStats, ServiceFaq, ServiceClose });