Apple — QA Report

# Apple Recreation QA Report

**Date:** 2026-10-24
**Reference homepage:** https://www.apple.com/
**Reference secondary page:** https://www.apple.com/iphone/
**Scope:** Public, unaffiliated noindex recreation for visual-study and client-review purposes.

## Completion status

- **Technical implementation:** complete for the captured homepage and representative iPhone page.
- **Screenshot evidence:** complete at 1440×900 and 390×844, including full-page captures.
- **Intermediate responsive checks:** complete at 768px and 1024px.
- **Interaction QA:** complete for the local navigation, region banner, mobile menu, search overlay, bag drawer, product rail and local demo actions.
- **Visual approval:** pending Frederick's review.

This is an independent implementation. It does not copy Apple's source code, logo artwork, product photography or commerce flow.

## Evidence index

### Fixed-viewport local captures

- `local-screenshots/home-desktop-1440x900.png`
- `local-screenshots/home-mobile-390x844.png`
- `local-screenshots/secondary-desktop-1440x900.png`
- `local-screenshots/secondary-mobile-390x844.png`

### Full-page local captures

- `local-screenshots/home-full-desktop.png`
- `local-screenshots/home-full-mobile.png`
- `local-screenshots/secondary-full-desktop.png`
- `local-screenshots/secondary-full-mobile.png`

### Side-by-side and difference evidence

- `qa/apple-comparison-overview.png`
- `qa/homepage-desktop-side-by-side.png`
- `qa/homepage-mobile-side-by-side.png`
- `qa/secondary-desktop-side-by-side.png`
- `qa/secondary-mobile-side-by-side.png`
- `qa/homepage-desktop-difference.png`
- `qa/homepage-mobile-difference.png`
- `qa/secondary-desktop-difference.png`
- `qa/secondary-mobile-difference.png`

### Machine-readable layout QA

- `local-layout-qa.json`
- `tools_cdp_capture.py`

## Reference-to-local geometry

The captured reference measurements were used as targets rather than relying only on a successful HTTP response.

| Surface | Reference target | Local measured result | Result |
|---|---:|---:|---|
| Homepage desktop region banner | 70px | 70px | Match |
| Homepage desktop global header | y=70, h=44px | y=70, h=44px | Match |
| Homepage mobile region banner | 135px | 135px | Match |
| Homepage mobile global header | y=135, h=48px | y=135, h=48px | Match |
| Secondary desktop global header | y=70, h=44px | y=70, h=44px | Match |
| Secondary mobile global header | y=135, h=48px | y=135, h=48px | Match |
| Desktop document width | 1440px | 1440px | No overflow |
| Mobile document width | 390px | 390px | No overflow |
| Intermediate width 768px | no horizontal overflow | no horizontal overflow | Pass |
| Intermediate width 1024px | no horizontal overflow | no horizontal overflow | Pass |

The first local mobile pass was 25px too tall in the region banner. The CSS was corrected and the second capture measured exactly 135px, aligning the mobile header and hero start with the reference.

## Interaction results

Verified through the local CDP runner:

- Homepage and iPhone page links navigate between the two local pages.
- Desktop navigation remains visible at 1024px and 1440px.
- Mobile navigation appears at 390px and 768px.
- Mobile menu opens and closes; `aria-expanded` changes to `true` when opened.
- Mobile menu opening does not introduce horizontal overflow.
- Region selector Continue and close controls remove the local banner.
- Search control opens the local search overlay; close control returns it to hidden state.
- Search input updates the local search hint without contacting a remote search service.
- Bag control opens the local bag drawer; the drawer has `aria-hidden="false"` while open.
- Product rail next control translates the horizontal category rail on the iPhone page.
- Buy, Apply and Learn more demo actions remain local and display a notice; they do not create accounts, payments, checkout, subscriptions or external requests.

## Visual comparison findings

The side-by-side and difference images show that the independent recreation preserves the primary composition:

- Region banner followed by a compact global navigation bar.
- Large centered homepage product hero with prominent product title, supporting copy and paired actions.
- Alternating light and black editorial hero sections.
- iPhone page financing strip, large page heading, product/category rail and rounded showcase cards.
- Mobile conversion of the desktop navigation to a compact control bar and clipped product rail.

### Layout and typography differences

These are implementation differences that remain separate from the asset limitations:

- The local navigation uses a text `A` mark and Unicode search/bag/menu glyphs, so icon widths and optical weight do not exactly match the reference.
- The local font uses the system SF-style stack rather than Apple's proprietary font files. Line breaks and letterforms can therefore differ slightly even where the type scale is close.
- The local iPhone category rail uses CSS-generated device cards rather than the reference's detailed product thumbnails. The rail geometry and labels are preserved, but the thumbnail silhouettes are simpler.
- The local mobile iPhone showcase begins at approximately y=566; the reference's content rhythm is similar but not pixel-identical below the fixed viewport.
- The local homepage hero section is intentionally shorter than a complete production homepage because the captured reference only establishes the first visible hero and the local page includes a finite study sequence.

### Image and branding differences

These differences are expected and intentional:

- Homepage and iPhone showcase photography uses independent Unsplash substitutes documented in `ASSET_PROVENANCE.md`.
- The local implementation does not use Apple's proprietary product renders, photography, Apple logo artwork, fonts or source code.
- The local “A” mark and “A Card” panel are neutral substitutes, not Apple branding.
- Pixel-difference percentages are consequently not a pure layout score. The large image areas dominate the pixel delta even when the surrounding geometry is close.

For context, raw fixed-viewport pixel comparison produced the following mean absolute RGB deltas: homepage desktop 40.54, homepage mobile 37.15, secondary desktop 18.11 and secondary mobile 28.39. These are diagnostic only, not claims of brand or asset parity; substitute imagery and iconography are the main contributors.

## Remaining defects

1. Exact Apple image, logo, font and icon parity is not claimed and cannot be verified from the independent asset set.
2. The local category thumbnails are CSS approximations, not exact product renders.
3. The local demo actions intentionally stop before purchase, account, financing or application flows.
4. The local page is a representative visual recreation, not a full clone of every live Apple homepage section or product model.
5. The live Apple site may change after the reference capture; the saved reference screenshots are the authoritative comparison inputs for this run.

## Acceptance decision

Apple passes the technical recreation gate: both requested pages are implemented, fixed-viewport captures exist, full-page captures exist, no-overflow checks pass at all requested widths, interactions were exercised, and comparison/difference evidence is preserved. Visual approval remains **pending Frederick's review** because the task separates layout fidelity from intentionally substituted imagery and branding.