# About Us — Round 2 reconcile (agent: aboutus-r2)

Desktop frame **3121:22745** (1440w), Mobile frame **3121:23680** (393w), file key R6EY4TpNCvVqUEikM7Lof9.
Method: Figma IR (bbox/fills/per-run text) vs DOM getBoundingClientRect+getComputedStyle, numbers compared.
Page was already substantially built; this round measured every unique section both breakpoints and
fixed the deltas found. State of page on arrival: high-fidelity. Net fixes: 4 (chairman text-align+gap,
mobile hero type, mobile stats type). Two commits.

## Desktop (1440px)

| Section | Figma node | measured-vs-IR | fixed? | residual/notes |
|---|---|---|---|---|
| Hero | 3121:22746 | left card 722×330 r28 #f4f4f8; h1 Poppins SemiBold 55px #2b286f ORIGINAL; photo 526w r28 navy mask | MATCH (no fix) | hero image subject = CFS Eye Institute building, matches Figma fill 262cf78… |
| Founded para | 3121:22824 | Poppins Light 20px #2b286f TITLE LEFT, w1395 | MATCH | wrapper capitalize/text-left ✓ |
| Stats | 3121:22890 (Group 985) | photo 716×634 r15; pill 232×108 r15 alt navy/#f1f1f1; number ~65px; label Poppins Regular 30px #2b286f LEFT | MATCH | number rendered as text 65px/500 (Figma number is an outlined group ~65px) |
| Advanced Tech | 3121:22795 | grey band #f1f1f1; heading Light 50px ls−4% TITLE; para Light 20px LH34 TITLE CENTER | MATCH | tracking-[-2px]=−4%@50 ✓ |
| Section tabs | (none in Figma) | navy/white anchor pills | n/a | **Deliberate non-Figma addition** — jump-nav aid; no Figma node has these labels (find_relevant empty). Wraps, dynamic count safe. |
| Leading Future | 3121:22800 | heading 50px Light; 3 navy cards r15 h186, text white 20px center | MATCH | card h186 ✓ |
| CFS Equipment | 3121:22812 | heading 50px Light; para 20px Light TITLE CENTER; 4 tabs 325×75 r13 (active #ffcb05/navy, 23px); panel img 385×216 r19 | MATCH | tab click-switch verified (aria-selected + panel toggle fires) |
| Why CFS | 3121:22816 (shared) | 4 feature cards | MATCH; HOVER VERIFIED | hover fires: bg #f1f1f1→#fff, h3 24→19px, desc opacity 0→1 reveal, underline 68→120px |
| Avant-Garde | 3121:22827 | 9 cards 424×155, 3-col gap-x62 gap-y18; yellow #ffcb05 r15 + inner #f4f4f8 r15 ml9px (left stripe); text Light 20px #2b286f TITLE center ls−4%; Load More 197×52 r10 | MATCH | |
| Chairman's Desk | 3121:22921/22923 | navy panel #2b286f r15 LEFT (769w), text WHITE Poppins Light 20px TITLE **LEFT** (was justify); photo card RIGHT 583w (367 photo + 143 name plate r15 #f1f1f1); col gap 34px | **FIXED** | was text-justify→text-left; gap 15→34px |
| Mgmt Team | 3121:22865 | heading Light 50px; 5-col grid card 265×341 r17 gap17; photo top 227; navy role bar 32px | MATCH; HOVER VERIFIED | per variant 3121:15514→15523: border→1px #2b286f, role bar #2b286f→#ffcb05, role text Light13 white→SemiBold14 navy, photo grows 218→242 (≈scale1.1). All fire (measured: border #2b286f, transform matrix1.1, bar #ffcb05, 14px/600, navy). |
| Board of Directors | 3121:22879 | same team-card design | MATCH (shares team-card hover) | |
| Callback / Footer | shared | — | not re-reconciled (shared canonical, out of about-us scope) | |

## Mobile (393px)

| Section | Figma node | measured-vs-IR | fixed? | notes |
|---|---|---|---|---|
| Hero | 3121:23706 | grey card heading **Bold 30px** #2b286f (was SemiBold 40px); subtitle **Regular 15px** (was Light 19px); LEFT; photo stacked below | **FIXED** | base 30/15, lg: 55/25 kept |
| Founded para | 3121:23715/16 | Poppins Light 15px LH25 #2b286f TITLE LEFT | MATCH | |
| Stats | 3121:23721 (Group 1026) | pill **135×77** r15 alt navy/grey; number Medium **45px** center; label Regular **15px** #2b286f LEFT | **FIXED** | pill 150→135, num 44→45, label 20→15 |
| Advanced Tech | 3121:23744 | heading **SemiBold 30px** LH38 TITLE CENTER; para Light 15px | MATCH | heading uses font-semibold lg:font-light text-[30px] lg:text-[50px] ✓ |
| Leading Future | 3121:23747 | heading SemiBold 30px; 3 cards 345w 137h 1-col | MATCH | |
| Mgmt Team (horizontal) | 3121:23796 (Frame 714) | heading SemiBold 30px center; card 345×162 r10 #f1f1f1, photo LEFT 124×162 r10, name Poppins Medium 19/21px LEFT, yellow role bar (#ffcb05) starting after photo, role Lato SemiBold 14px navy center; Load More 132×33 #ffcb05 r4 | MATCH | role bar x=124 (after photo) ✓; team-card-m flex correct |
| Board | (same mobile card) | — | MATCH | |
| All sections | | document.scrollWidth = 393 (no horizontal overflow) | ✓ | verified after every fix |

## CDN arbitrary-class sanity
Verified responsive arbitrary classes resolve under bare Play CDN (no inline tailwind.config):
`font-bold lg:font-semibold`, `text-[30px] lg:text-[55px]`, `text-[15px] lg:text-[20px]`,
`tracking-[-1.2px] lg:tracking-[-0.5px]`, `text-justify lg:text-left` — all measured to take effect
at both 393 and 1440. No silent class failures found; no css/custom.css additions needed.

## Open questions / deliberate deviations
- **Section-tabs pill bar** (CFS Technology / Chairmen's Desk / Management Team / Board of Directors):
  NOT present in the Figma frame (lexical search for the labels returns nothing). Kept as a deliberate
  jump-navigation aid; it wraps and tolerates dynamic CMS tab counts. Flag for client confirmation.
- **Floating "here to assist" chat bubble** (desktop Group 951 / mobile Group 81) + a small 53px
  scroll/edge icon (Frame 461/464): present in Figma as floating widgets; not built (treated as a
  global site chat widget, not page content). Note for client.
- Mobile chairman stacking: built as heading→photo→text (photo above navy panel); conventional mobile
  order, renders clean. Figma mobile chairman frame not isolated to byte level this round.
- Stat numbers rendered as live text (Poppins Medium) rather than the outlined-vector glyphs Figma uses;
  visually equivalent and CMS-friendlier.