# About Us — FINAL QA CERTIFICATION (agent: aboutus-qa)

Capstone sign-off after R1/R2/R3. Desktop frame **3121:22745** (canonical), mobile
frame **3121:23680**, file key R6EY4TpNCvVqUEikM7Lof9. All numbers are measured facts:
Figma IR (relativeBbox + per-run font/case/color, hover via get_variant_set) vs DOM
`getBoundingClientRect`/`getComputedStyle`, engine = playwright (Chromium), measured at
1440px (desktop) and 393px (mobile). Hovers PROVEN by real `hover` + computed-style read.

Net new fix this round: **1** (Avant-Garde Load More hover). Everything else verified
matching IR with no change needed. Commit `b3999f2`.

## Per-section verification table — DESKTOP (1440px, scrollW 1425 ≤ 1440, no overflow)

| Section | Geometry | Fonts (per run) | Color | Images/Icons | Hovers | Notes (measured) |
|---|---|---|---|---|---|---|
| Hero | ✓ | ✓ | ✓ | ✓ | n/a | card 722×330 r28 #f4f4f8; H1 Poppins SemiBold 55px -0.5px #2b286f; sub Light 25px; photo wrap 526×330 r28 navy |
| Breadcrumb | ✓ | ✓ | ✓ | ✓ | (links) | Poppins Light 15px -0.6px capitalize; Home #000 + chevron + About Us #636262 |
| Founded para | ✓ | ✓ | ✓ | n/a | n/a | Poppins Light 20px -0.2px capitalize **LEFT** (flip-flop resolved, see below) |
| Stats | ✓ | ✓ | ✓ | ✓ | n/a | photo 716×634 r15; pill 232×108 r15 navy/#f1f1f1 alt; num Poppins Medium 65px white; label Regular 30px navy |
| Section tabs | ✓ | ✓ | ✓ | n/a | ✓ | pill h50 r7 1px navy, Poppins Light 22px -0.88px capitalize; **hover proven**: bg→#ffcb05, text stays navy, Light→Medium(500), border→transparent (variant 3121:15352) |
| Advanced band | ✓ | ✓ | ✓ | n/a | n/a | full-bleed #f1f1f1; H2 Poppins Light 50px -2px capitalize center; body Light 20px lh34 center |
| Leading cards | ✓ | ✓ | ✓ | n/a | n/a | card 423×186 r15 navy; text Poppins Regular(400) 20px white capitalize center |
| CFS Equipment | ✓ | ✓ | ✓ | ✓(placeholder) | ✓ | H2 Light 50px; active tab 325×75 r13 yellow/navy/Medium 23px, inactive navy/white/Light; panel img 385×216 r19; text Light 20px justify. **Tab switch proven** (settled: tab1 yellow/navy/500, panel toggles). Panel image is shared CMS placeholder across 4 tabs. |
| Why CFS | ✓ | ✓ | ✓ | n/a | ✓ | H2 Light 50px -2px; card 278×151 r11 #f1f1f1; title Poppins Light 31px -1.24px. **hover proven**: bg→white, title→19px, desc opacity 0→1 maxH 72px, underline 68→120px |
| Avant-Garde | ✓ | ✓ | ✓ | n/a | ✓ FIXED | H2 Light 50px; card outer 414 #ffcb05 r15 + inner #f4f4f8 ml9 r15; text Light 20px -0.8px capitalize center; Load More 197×52 r10 Lato SemiBold 25px. **hover FIXED + proven**: bg→#ffcb05, navy text, navy 1px border (was navy-fill/white — wrong) |
| Chairman's Desk | ✓ | ✓ | ✓ | ✓ | n/a | navy panel r15, text Poppins Light 20px white capitalize **LEFT**; photo card 583w (photo h367 r15 + #f1f1f1 plate); name Poppins SemiBold 20px, role Medium 22px |
| Management Team | ✓ | ✓ | ✓ | ✓(placeholders) | ✓ | card 265×341 r17 #f1f1f1; photo 227h; navy bar 32h; name Poppins Medium 20px; role Light 13px white. **hover proven**: border→1px navy, bar→#ffcb05, role→navy SemiBold 14px, img scale 1.1 origin-bottom (227px) |
| Board of Directors | ✓ | ✓ | ✓ | ✓(placeholders) | ✓ | same team-card design + hover (shares proven class) |
| Callback form | ✓ | ✓ | ✓ | ✓ | (shared) | shared canonical `.callback-form__*`; not re-forked |
| Footer / utility / nav / sticky | ✓ | ✓ | ✓ | ✓ | (shared) | reused canonical components; nav `aria-current` = About Us |

## Per-section verification table — MOBILE (393px, scrollW 378 ≤ 393, 0 unclipped overflow)

| Section | Geometry | Fonts | Color | Images | Notes (measured) |
|---|---|---|---|---|---|
| Hero | ✓ | ✓ | ✓ | ✓ | H1 Poppins **Bold 700** 30px lh52 -4% **ORIGINAL** case #2b286f (IR 3121:23708 confirms); sub Regular 15px lh22 -4% ORIGINAL; photo 346×367 r28 navy stacked below card |
| Founded para | ✓ | ✓ | ✓ | n/a | Poppins Light 15px lh22.5 capitalize LEFT |
| Stats | ✓ | ✓ | ✓ | ✓ | pill 135×80 r15 navy/grey alt; num Poppins Medium 45px white; label Regular 15px navy; photo 346×370 |
| Advanced band | ✓ | ✓ | ✓ | n/a | H2 Poppins SemiBold 30px lh38; body Light 15px lh25 LEFT |
| Leading cards | ✓ | ✓ | ✓ | n/a | card 346×137 **r10** navy; text Poppins **Light 15px** lh21 center |
| Why CFS | ✓ | ✓ | ✓ | n/a | single col 279px r11; desc maxH 0 at rest (touch — no hover reveal, correct) |
| CFS Equipment | ✓ (deviation) | ✓ | ✓ | ✓ | wrapping-pill tabs (260×60) + switchable panel (img 346×216); tab bar no overflow. Deliberate: kept dynamic pills over Figma's fixed 2-tab card per CMS dynamic-tab rule |
| Mgmt/Board team | ✓ | ✓ | ✓ | ✓(placeholders) | horizontal card 346×162 r10 #f1f1f1; photo-left 124×162 white; name Poppins Medium 21px -0.76px; yellow bar starts x=124, Lato SemiBold 14px navy 36h; Load More 132×33 r4 yellow; desktop grid hidden, mobile list shown |
| Callback / footer / sticky | ✓ | ✓ | ✓ | ✓ | mobile reused canonical; bottom sticky action bar 66h |

## Flip-flops resolved (vs Figma IR ground truth)

1. **Founded paragraph alignment** — R1/accuracy-doc said "justified"; R2 changed to LEFT; R3 said LEFT.
   IR node 3121:22824 `text.textAlignHorizontal = "LEFT"`, textCase TITLE. **Resolved: LEFT.**
   Current HTML (`capitalize text-left`) is correct; the "justified" note in the accuracy doc is stale.
2. **Section-tabs existence in Figma** — R2 claimed "NOT present in Figma, deliberate jump-nav addition";
   R3 claimed they exist with a hover variant. IR: **they DO exist** — Frame 832 (3121:22790), 4 instances
   with exactly the labels "CFS Technology / Chairmen's Desk / Management Team / Board Of Directors" and
   ON_CLICK scroll-to reactions. **Resolved: real Figma section, R2 was wrong.** Geometry + hover both match.
3. **Section-tab hover** — R3 fixed it to yellow-fill/navy-text/Medium/no-border. IR variant 3121:15352
   confirms: bg #ffcb05, text stays #2b286f, Light→Medium(500), stroke removed. **Resolved + proven firing.**
4. **Avant-Garde Load More hover** — R3 left it on the site navy-fill convention (un-diffed). This round
   diffed variant 1770:9834: bg→#ffcb05, navy text, navy 1px border retained. **Resolved: FIXED this round**
   (commit b3999f2); was a real defect. Proven firing.
5. **Team-card hover image origin** — R1 used center scale-1.06; R3 fixed to scale-1.1 origin-bottom.
   IR (3121:15523 vs default) grows photo 227→242 bottom-anchored. **Resolved: scale-1.1 origin-bottom**, proven.

## Hover / interaction inventory (every interactive element, proven result)

| Element | Trigger | Proven result (computed style) | Verdict |
|---|---|---|---|
| Section tab (CFS Technology) | hover | bg rgb(255,203,5), color rgb(43,40,111), fw 500, border transparent | ✓ matches variant 3121:15352 |
| Equipment tab switcher | click tab1 | aria-selected true, tab1 yellow/navy/500, tab0 navy/white/300, panel0 hidden + panel1 flex | ✓ |
| Equipment dynamic-tab stress | inject +4 tabs | scrollW stays 1425, no overflow (flex-wrap) | ✓ |
| Section-tab dynamic stress | inject +4 tabs | scrollW stays 1425, no overflow | ✓ |
| Why-CFS card | hover | bg→white, title→19px, desc opacity 1 maxH 72px, underline→120px | ✓ matches variant 3121:15462 |
| Avant-Garde Load More | hover | bg rgb(255,203,5), color rgb(43,40,111), border 1px navy | ✓ FIXED, matches variant 1770:9834 |
| Management team card | hover | border 1px navy, img scale 1.1 origin 128.7px/227px (bottom), bar rgb(255,203,5), role rgb(43,40,111) SemiBold 14px Poppins | ✓ matches variant 3121:15523 |
| Board of Directors card | hover | shares proven team-card class | ✓ |
| Nav links / utility links / footer links | hover | underline / color transitions (shared canonical) | ✓ (shared) |
| Callback submit / inputs | focus | shared canonical focus rings | ✓ (shared) |

## Residuals (non-defects, deliberate / CMS-driven)

- **Equipment panel image**: one shared placeholder (`equipment-panel.png`) across all 4 tabs; Figma fills
  tab-0 with a real Catalys-laser photo. Left as CMS placeholder (4 dynamic tabbed_facility panels). Wire
  real per-tab images when client provides them.
- **Team/Board photos**: ~4 distinct stock portraits repeated across cells — the Figma itself repeats them;
  these are CMS team_member rows, genuine placeholders not stale art.
- **CFS Equipment mobile structure**: kept wrapping-pill tabs + switchable panel instead of Figma's fixed
  2-tab integrated card, to honor the NON-NEGOTIABLE CMS dynamic-tab-count rule. Robust over pixel-exact.
- **Stat numbers**: live Poppins Medium text (not Figma's outlined-vector glyphs) — visually equivalent, CMS-friendly.
- **Global side padding**: 30px desktop / 16px mobile (project-wide), vs Figma's 22/25 — ~1.5% narrower inner
  container, consistent project choice, not a per-section defect.

## Client questions (consolidated)

1. **Two desktop "About Us" frames (3121:22745 vs 3121:22956)** — RESOLVED as not a design choice: the
   Avant-Garde "Load More" button's ON_CLICK reaction NAVIGATEs from 3121:22745 (h 7509) to 3121:22956
   (h 7892, +383px). The second frame is the **same page with the Avant-Garde equipment grid expanded**
   (post-Load-More state), not an alternate layout. Our build renders all equipment items in one grid + a
   Load More button (functional equivalent; CMS paginates). No client decision needed beyond confirming
   Load-More pagination behavior; primary frame 3121:22745 is canonical.
2. **Floating chat widget** ("here to assist" bubble, Group 951/Group 81) — present in Figma as a global
   floating widget; built as the sticky-bar chat bubble. Confirm it's the site-wide chat, not page content.
3. Confirm client accepts the dynamic wrapping-pill equipment tabs (mobile) over the fixed 2-tab card.

## VERDICT

- **Desktop (1440px): PASS** — all sections geometry/typography/color/images/hovers measured matching IR;
  the one defect (Avant Load More hover) fixed and proven; no horizontal overflow; dynamic tabs stress-safe.
- **Mobile (393px): PASS-WITH-RESIDUALS** — all measured sections match the mobile IR; no real overflow
  (scrollW 378); the only residual is the deliberate dynamic-pill equipment layout (CMS rule) vs Figma's
  fixed 2-tab card. No defects.

Overall: **PASS** (page certified; residuals are deliberate CMS-driven deviations + placeholder images
awaiting client assets, not fidelity defects).