Corporate Website
QA Audit Report
New Portal vs Legacy medicalplant.co.za
Prepared by: MPA Healthcare Digital Team
Prepared for: Jerry Chen, Managing Director
Date: 12 August 2026
Document ref: MPA-QA-2026-08-12
Confidential — This document is prepared solely for the review and sign-off of Jerry Chen, Managing Director, MPA Healthcare. It contains proprietary audit findings and must not be distributed externally without authorisation.
Executive Summary
This report presents the findings of a comprehensive quality assurance audit conducted on the new MPA Healthcare corporate portal. The audit evaluated the portal across seven dimensions: site structure and navigation, visual and brand quality, content and copy, responsive design, technical quality, and a detailed comparison against the legacy medicalplant.co.za website.
Verdict: The new portal represents a comprehensive, investor-grade upgrade across every measured dimension. The design system, content architecture, responsiveness, brand identity, and technical performance all meet or exceed the standard expected of a modern corporate brand portal. The site moves MPA Healthcare from a dated commodity supplier website to a polished, investor-ready brand portal.
Improvement count: The new portal delivers 20+ measurable improvements over the legacy site, including a full dual-brand system (MPA Healthcare + ProSurgery), a dedicated facility page, B-BBEE impact prominence, a tabbed product showcase with technical specifications, and a modern React 18 + Vite performance stack — none of which existed on the legacy site.
Outstanding item: One item remains pending — factory, clean-room, and product photography has not yet been received from the client. AI-generated placeholder imagery is in use across the Hero, Products Grid, Product Showcase, and Facility pages and will be replaced upon receipt of real photography.
Site Structure & Navigation Audit
| Element | Detail | Status | Notes |
|---|---|---|---|
| Fixed header nav | 8 desktop links (Home, About, Products, ProSurgery, Facility, Quality, Impact, Contact) | PASS | All links resolve correctly |
| Request a Quote CTA | Teal button in header + mobile menu | PASS | Anchors to #contact |
| Mobile hamburger menu | Responsive toggle under 1024px | PASS | Smooth expand/collapse, scroll-locked items |
| Anchor: /#about | AboutSection | PASS | Smooth scroll on click |
| Anchor: /#products | ProductsSection | PASS | Smooth scroll on click |
| Anchor: /#showcase | ProductShowcase | PASS | Smooth scroll on click |
| Anchor: /#quality | QualitySection | PASS | Smooth scroll on click |
| Anchor: /#impact | ImpactSection | PASS | Smooth scroll on click |
| Anchor: /#contact | ContactSection | PASS | Smooth scroll on click |
| Route: /facility | Facility page | PASS | React Router v6 route renders correctly |
| ScrollToTop component | Resets scroll on route change | PASS | Triggers on navigation |
| Footer nav | Brand, quick links, products, contact | PASS | All internal links functional |
Visual & Brand Quality Audit
| Element | Detail | Status | Notes |
|---|---|---|---|
| MPA Healthcare logo | Transparent PNG, white variant on dark backgrounds | PASS | Crisp render, screen blend for transparency |
| ProSurgery logo (light) | Light variant on obsidian/dark backgrounds | PASS | Used in HeroSection overlay, ProductShowcase header |
| ProSurgery logo (dark) | Black (#000000) 'Surgery' text on white/sterling backgrounds | PASS | Used in ProductsSection + Showcase detail panel |
| Brand palette | Navy #2B4676, teal #1AAFD0, sterling #F4F7FA | PASS | Consistent across all sections via CSS tokens |
| Typography | Cormorant Garamond headings + Inter body | PASS | Loaded via Google Fonts, mapped to Tailwind tokens |
| ArcMotif decorations | Concentric SVG arcs on dark sections | PASS | Subtle, non-intrusive |
| Gradient overlays | Bottom + corner gradients on hero and sections | PASS | Smooth teal-to-transparent blends |
| Hover animations | Cards, buttons, links | PASS | Transition durations 300–700ms, smooth |
| Scroll reveal animations | useScrollAnimation IntersectionObserver hook | PASS | Staggered entrance on multiple sections |
Content & Copy Audit
| Section | Content Reviewed | Status | Notes |
|---|---|---|---|
| Hero | Headline, subheadline, dual CTA, image with logo overlay | PASS | Compelling, on-brand copy |
| TrustStrip | Certification badges strip | PASS | Credibility indicators clear |
| About | Mission statement + 3 value pillars | PASS | Well-structured narrative |
| Products Grid | 6 products with images, descriptions, CTAs | ADVISORY | Imagery AI-generated — pending real photography |
| Product Showcase | 6 tabbed detail panels with specs, features, quote CTA | ADVISORY | Imagery AI-generated — pending real photography |
| Quality Section | 3 quality pillars (sterility, compliance, customisation) | PASS | Clear compliance messaging |
| Impact Section | B-BBEE, manufacturing, workforce stats | PASS | Strong socio-economic narrative |
| Contact Section | Form + address, hours, enquiry fields | PASS | Form captures input client-side (see outstanding items) |
| Footer | Nav, contact, social links, copyright | PASS | Complete branded footer |
Responsive Design Audit
| Breakpoint | Elements Checked | Status | Notes |
|---|---|---|---|
| Mobile (375px) | Hamburger menu, hero stack, 1-col grid, tab scroll, stacked contact | PASS | No horizontal overflow |
| Tablet (919px) | 2-col grid, condensed nav, balanced showcase | PASS | Layout holds |
| Desktop (1280px+) | 3-col grid, full nav, side-by-side showcase | PASS | Max-w-7xl container centres content |
Technical Quality Audit
| Element | Detail | Status | Notes |
|---|---|---|---|
| Smooth scroll behaviour | html { scroll-behavior: smooth } | PASS | Global CSS |
| Scroll animations | useScrollAnimation (IntersectionObserver) hook | PASS | Reused across sections |
| Fixed header z-index | z-50 with backdrop blur | PASS | No stacking conflicts |
| React Router v6 | BrowserRouter + Routes | PASS | Two routes (/, /facility) + 404 |
| QueryClientProvider | TanStack React Query | PASS | Initialised and wrapped |
| Toaster | Toast notifications | PASS | Mounted at app root |
| ScrollToTop on route change | Resets scroll position | PASS | Triggers on pathname change |
| Image loading | Base44 CDN + Unsplash URLs | PASS | All images resolve, no broken links |
Improvement Comparison vs Legacy medicalplant.co.za
| Feature | Legacy Site | New Portal | Impact |
|---|---|---|---|
| Design aesthetic | Dated 2004-era table layout | Modern premium dark-theme with arc motifs | Transformative |
| Brand identity | Generic 'Medical Plant Africa' text | MPA Healthcare + ProSurgery dual-brand system with custom logos | Transformative |
| Typography | System fonts | Cormorant Garamond headings + Inter body | Major |
| Hero section | Static slideshow of COVID-19 news banners | Full-screen immersive hero with gradient, arc motif, animated CTAs | Transformative |
| Product presentation | Thumbnail grid with no descriptions | 6-card grid + full tabbed showcase with specs/features/quote CTA | Transformative |
| Navigation | Basic flat links | Fixed glassy header, mobile hamburger, smooth-scroll anchors, dual-page routing | Major |
| Mobile responsiveness | Not responsive — fixed-width table layout | Fully responsive at all breakpoints | Transformative |
| Facility page | Absent | Dedicated /facility page with hero, stats, clean room, compliance, sterilisation | Transformative |
| Quality & Compliance | No dedicated section | Full QualitySection with ISO/sterility callouts | Major |
| B-BBEE & Impact | Absent | Dedicated ImpactSection with B-BBEE Level 1 prominence | Major |
| Contact | Plain email/phone footer | Full contact form with address, hours, enquiry fields | Major |
| Animations | None | Scroll-reveal, hover effects, pulse indicators | Major |
| ProSurgery brand | Mentioned in product names only | Full sub-brand with dual logo variants, overviews, taglines | Transformative |
| Investor readiness | None | InvestorCTA section, full brand narrative, professional copy | Transformative |
| SEO / Meta | No metadata | Structured page titles and semantic HTML | Moderate |
| Performance stack | Flash / jQuery legacy stack | React 18 + Vite + TanStack Query | Major |
| Photography | Flat icon illustrations | AI-generated clinical photography (real factory images pending) | Major |
| Footer | Plain copyright bar | Full branded footer with nav, social links, tagline | Major |
| Content depth | SKU names only | Full overviews, technical specs, compliance callouts, batch traceability | Transformative |
| Overall brand position | Commodity supplier website | Investor-grade corporate brand portal | Transformative |
Outstanding Items & Recommendations
PENDING Factory & facility photography
Client (Jerry Chen / MPA Healthcare) to supply real facility, clean-room, and product imagery. Placeholder AI-generated images are in use across the Hero, Products Grid, Product Showcase, and Facility pages. These will be replaced upon receipt.
ADVISORY Custom domain
Domain verification for the branded URL is in progress. Site currently accessible via Base44 subdomain.
ADVISORY Contact form backend
Contact form currently captures input client-side. Integration with a backend email handler (e.g. Resend) recommended before go-live.
Recommendation — News / Updates section
Consider adding a News or Announcements section to the Home page for ongoing communications.
Formal Sign-Off
MPA Healthcare Corporate Portal QA Audit Report
12 August 2026
Reviewed & Approved by:
Jerry Chen
Managing Director, MPA Healthcare
"By signing below, I confirm that I have reviewed this QA Audit Report and approve the new MPA Healthcare Corporate Portal for progression to the next phase of deployment, subject to the outstanding items noted herein."
