# Oral Drill Design QA ## Source visual truth - Cambridge Veritas reference route: `/tools/photo-mode`. - Source screenshot: `.artifacts/photo-mode-desktop.png`. - Source pixels and CSS viewport: 1920 x 1080 at device scale factor 1. - Design target: preserve the established header, Axiforma typography, burgundy/ivory/gold palette, rounded educational cards, restrained borders and clear tool-first hierarchy. ## Rendered implementation - Route: `http://localhost:3000/tools/oral-drill`. - Desktop screenshot: `.artifacts/oral-drill-desktop.png`. - Tall desktop screenshot: `.artifacts/oral-drill-tall.png`. - Mobile-width screenshot: `.artifacts/oral-drill-mobile.png`. - Combined source/implementation comparison: `.artifacts/oral-drill-comparison.png`. - Desktop viewport: 1920 x 1080; tall verification: 1920 x 1800. - State: signed out, search empty, pronunciation analysis idle. ## Full-view comparison evidence The combined comparison places Photo Mode above Oral Drill. Both use the same navigation, type scale, burgundy hero field, gold primary control, 2 x 2 capability-card pattern, ivory section transition and centered tool entry. Oral Drill has its own listening-and-repetition message while remaining visibly part of the same Cambridge Veritas product family. The promotional countdown is intentionally absent. ## Focused region evidence - Header: same logo scale, burgundy background, navigation spacing and gold login border. - Hero: same content frame, extra-bold headline, readable supporting copy and gold primary action. - Tool entry: tall desktop verification confirms the search card is visible immediately after the explanatory heading, with a wide white card and burgundy Search button. - Supporting content: the first methodology section continues the same eyebrow, heading and card language without introducing off-theme decoration. - Responsive behavior: hero content and cards stack at mobile breakpoints, controls become full width and the page root prevents horizontal overflow. The available headless browser enforces a wider minimum layout viewport than the 390px image crop, so the mobile screenshot is retained as a width-stress artifact rather than a pixel-perfect device emulation. ## Required fidelity surfaces - Fonts and typography: passed. Oral Drill inherits Axiforma and matches the website's heavy display headings, compact uppercase eyebrows and body-copy rhythm. - Spacing and layout rhythm: passed. The desktop page uses the established `max-w-7xl` frame, generous hero spacing, balanced section padding and consistent card gaps. - Colours and visual tokens: passed. Burgundy `#380F17`/`#4A1429`, gold `#D4AF37`, warm ivory `#F6EEE8`/`#FAF5F0` and muted plum body text are consistently reused. - Image and icon quality: passed. The page does not need a decorative raster image; Lucide icons from the existing site library are used at crisp native resolution, with no emoji, custom SVG artwork or gradients. - Copy and content: passed. The page implements the supplied SEO direction, pronunciation methodology, learner and TESOL use cases, levels, internal pathways, educational note, privacy guidance, reviewer line and eight visible FAQs. ## Interaction and technical checks - Page response: HTTP 200. - Metadata title and description: present and updated. - Semantic H1 count: one. - JSON-LD: WebPage, WebApplication/SoftwareApplication, BreadcrumbList and FAQPage present. - Course schema: absent by design. - Promotional countdown: absent. - Search, dictionary lookup, audio playback, microphone recording, analysis, retry and sign-in flow: existing implementation preserved. - Input behavior: Enter key and Search button both trigger the existing lookup path. - ESLint: zero errors in the four touched Oral Drill files; eight pre-existing warnings remain in the legacy client logic. - Console and render state: no Next.js error overlay or route-render failure appeared in headless Chrome/Edge captures; browser console collection was unavailable in this environment. ## Findings and iteration history - P1 unsupported marketing copy in the in-tool CTA and completion modal: fixed by replacing unlimited/perfection language with accurate training-pathway copy and working internal links. - P2 deprecated keyboard handler: fixed by replacing `onKeyPress` with `onKeyDown`. - P2 custom inline star SVG: fixed by using the site's Lucide icon system. - P2 responsive search controls: fixed by stacking the input and button on small screens and restoring the horizontal layout at `sm`. - P0: none. - Remaining P1/P2: none known. ## Final result passed --- # CVAT Mobile Sticky Bar Design QA ## Source visual truth - Source screenshot: `C:\Users\HP\Downloads\WhatsApp Image 2026-10-08 at 21.13.59.jpeg`. - Source pixels: 738 x 1600. - Inferred mobile CSS viewport: approximately 369 x 800 at 2x device density, including phone/browser chrome. - Target state: keep the desktop CVAT sticky enrolment bar unchanged and reduce its mobile top footprint. ## Rendered implementation - Route: `http://localhost:3000/masterclass/cambridge-veritas-voice-and-accent-trainer-certification`. - State required for comparison: mobile viewport, page scrolled beyond 500px so the sticky bar is visible. - Implementation screenshot: unavailable because the required in-app browser could not initialize in this environment. - Browser-rendered comparison viewport and device density: unavailable. ## Full-view and focused comparison evidence - Source evidence shows the fixed bar occupying roughly three wrapped content rows: fee/date, waiting-list copy, and actions. - Rendered HTML returns HTTP 200 and contains the new CVAT-only compact responsive classes. - The revised mobile structure is two rows: fee/date and actions. Waiting-list copy is hidden below `md`; both actions remain at least 40px high. - At `md` and above, the original spacing, font sizes, flex direction, wrapping, button padding and waiting-list visibility are restored. - A visual side-by-side comparison could not be produced without a browser-rendered implementation screenshot. ## Required fidelity surfaces - Fonts and typography: code-level pass. Existing font family, weights and colours are unchanged; only mobile sizes and line heights are reduced, with original values restored at `md`. - Spacing and layout rhythm: code-level pass. Mobile changes from three wrapped rows to two compact rows using `px-3 py-2` and an 8px row gap. Visual confirmation remains blocked. - Colours and visual tokens: passed. Existing burgundy, ivory and gold tokens are unchanged. - Image and icon quality: passed. No raster assets were added or replaced; the existing Lucide message icon is preserved. - Copy and content: passed with one intentional responsive exception. Fee, closing date and both actions remain visible; waiting-list copy is hidden only on mobile to reduce height. ## Findings and comparison history - P2 excessive mobile sticky-bar height: addressed by preventing independent wrapping, hiding lower-priority waiting-list text on mobile, and placing actions in one compact full-width row. - Desktop regression risk: addressed with `md` overrides matching the original component values and a CVAT-only `mobileCompact` data flag. - Post-fix visual evidence: blocked because the required in-app browser could not capture the local mobile state. ## Technical checks - CVAT route response: HTTP 200. - CVAT compact markup: present. - CVIM compact markup: absent; original shared-bar markup remains present. - Scoped ESLint: passed with zero errors. - Primary CTA links and labels: preserved. - Console error inspection: blocked with browser verification. ## Final result blocked --- # Online Algebra Palette Alignment Design QA ## Source visual truth - Source: desktop screenshot attached to the user request, showing `/online-algebra-1-tutoring`. - Source pixels: 1920 x 1080, including browser chrome. - Target state: desktop landing page above the fold. - Requested outcome: align the page background colours with the established Cambridge Veritas course-page palette. ## Rendered implementation - Route: `http://localhost:3000/online-algebra-1-tutoring`. - State: desktop landing page. - Browser-rendered implementation screenshot: unavailable because no browser surface is connected in this session. - Implementation pixels, CSS viewport, density normalization, console inspection and interaction checks: unavailable. ## Full-view and focused comparison evidence - The page background now uses the shared course-page cream `#F6EFE9` instead of `#FAF6EF`. - Hero, comparison, guarantee, final CTA and supporting dark accents now use the shared deep burgundy gradient `#4A141E → #3B0F18 → #2B0A11` instead of the brighter purple gradient. - Navigation and mobile sticky backgrounds use translucent forms of the same shared cream. - A focused image-to-image comparison could not be completed without a browser-rendered implementation capture. ## Required fidelity surfaces - Fonts and typography: unchanged. - Spacing and layout rhythm: unchanged. - Colours and visual tokens: passed at code level; the landing page now uses the same cream, burgundy and gold family as the other course pages. - Image quality and asset fidelity: unchanged; no assets were added or replaced. - Copy and content: unchanged. ## Findings and comparison history - P2 inconsistent page cream: addressed by replacing landing-page `#FAF6EF` and `#FBF7EE` backgrounds with `#F6EFE9`. - P2 overly purple dark sections: addressed by replacing the old two-colour purple gradient with the shared three-stop burgundy gradient. - Post-fix visual evidence: blocked because the required browser-rendered screenshot could not be captured. ## Technical checks - Route response: HTTP 200. - Shared cream and burgundy tokens: present in rendered HTML. - Old purple gradient: absent from landing-page background styles. - Scoped ESLint: passed with zero errors. - Browser screenshot and console verification: blocked. ## Final result blocked --- # CVBE Instructor Section Compaction Design QA ## Source visual truth - Source: desktop CVBE instructor-section screenshot attached in the user request. - Source pixels: 1920 x 1080, including browser chrome. - Target state: the instructor card on `/masterclass/cambridge-veritas-certificate-in-business-english`. - Requested outcome: match the width of the section above, shorten the content and reduce the instructor card's overall height while keeping both columns balanced. ## Rendered implementation - Route: `http://127.0.0.1:3000/masterclass/cambridge-veritas-certificate-in-business-english`. - State: desktop instructor section. - Browser-rendered implementation screenshot: unavailable because neither the in-app browser nor another connected browser surface is available in this session. - Implementation pixels, CSS viewport and density normalization: unavailable. ## Full-view and focused comparison evidence - The wrapper now uses the same `max-w-6xl` width as the review section above instead of `max-w-7xl`. - The desktop card keeps two equal grid tracks so neither side visually dominates. - The left panel contains the portrait, instructor identity, LinkedIn action, a shortened experience statement and four essential credentials. - The right panel contains two concise biography paragraphs and four priority training outcomes. - Both panels use the existing burgundy, ivory and gold design language, rounded cards and existing portrait asset. - A browser-rendered side-by-side comparison and focused crop could not be produced, so visual fidelity remains blocked rather than assumed. ## Required fidelity surfaces - Fonts and typography: code-level pass. The established font family, heavy heading hierarchy and compact uppercase eyebrows are retained. - Spacing and layout rhythm: code-level pass. Desktop uses a 50/50 grid, reduced equal panel padding and parallel two-by-two detail grids; mobile collapses to one column. - Colours and visual tokens: passed at code level. Existing burgundy, gold, ivory and LinkedIn blue tokens are reused. - Image quality and asset fidelity: passed at code level. The original instructor portrait and object-top crop are retained; existing Lucide icons provide the supporting symbols. - Copy and content: passed at code level. Repetitive biography details were consolidated; six credentials and six training topics were reduced to four high-value items on each side. ## Findings and comparison history - P1 excessive component width: addressed by matching the surrounding `max-w-6xl` content container. - P1 excessive card height: addressed through smaller padding, portrait, headings and controls plus shorter content. - P2 content density: addressed by reducing both six-item grids to four compact items and shortening the biography. - P2 cross-column balance: retained with matching two-by-two detail grids and equal grid tracks. - Post-fix visual evidence: blocked because no browser surface could capture the implementation. ## Technical checks - Route response: HTTP 200. - Updated instructor heading and both content groups: present in rendered HTML. - Scoped ESLint: passed with zero errors. - Browser screenshot, responsive visual comparison, primary interaction inspection and console inspection: blocked. ## Final result blocked --- # CPD Certificate Card Compaction Design QA ## Source visual truth - Source: desktop TESOL certificate-card screenshot attached in the user request. - Displayed source pixels: 1920 x 1080, including browser chrome. - Target state: the CPD certificate section at desktop width. - Requested outcome: remove the large empty maroon area above the certificate and reduce the overall card height while retaining complete certificate and provider information. ## Rendered implementation - Route: `http://localhost:3000/certifications/cambridge-veritas-certificate-in-TESOL`. - State: desktop certificate section with the Level 5 TESOL designation. - Implementation screenshot: unavailable because no browser surface is exposed to this session. - Browser viewport, browser-console inspection, and density normalization: unavailable. ## Full-view and focused comparison evidence - The left column no longer vertically centres the certificate beneath an absolutely positioned label. It now starts with a compact label row, places the certificate directly below it, and uses the former empty space for a provider-verification block. - The desktop grid is closer to an even split, giving the certificate more usable width and reducing the likelihood of an overly tall text column. - The right column uses smaller padding, tighter typography, shorter supporting copy, compact fact cards, and no duplicate full-size verification button. - The existing certificate image, burgundy/ivory/gold palette, border treatment, rounded corners, external provider link, provider number, award requirements, and accreditation-status clarification are preserved. - A visual side-by-side comparison could not be produced without a browser-rendered implementation screenshot. ## Required fidelity surfaces - Fonts and typography: code-level pass. The existing type family and weight hierarchy are preserved, with tighter heading, body, and disclosure sizing. - Spacing and layout rhythm: code-level pass. The large blank left-column spacer is removed; labels, image, and verification information now follow a compact top-to-bottom flow. - Colours and visual tokens: passed. Existing burgundy, gold, ivory, amber, border, and shadow treatments are retained. - Image quality and asset fidelity: passed at code level. The supplied CPD certificate remains a responsive Next Image using its original 1600 x 1131 dimensions. - Copy and content: passed. Level, issuer, provider number, completion requirements, verification link, and the distinction between provider approval and activity accreditation remain visible. ## Findings and comparison history - P1 excessive empty space in the certificate-image column: fixed by removing vertical centring and the absolute label, then placing the certificate immediately after a static label row. - P2 unbalanced information density: fixed by moving provider approval and verification into the left column and tightening the right-column content. - P2 excessive overall height: reduced through smaller desktop padding, closer column proportions, more compact fact panels, and removal of the duplicate large verification CTA. - Post-fix visual evidence: blocked because the required browser-rendered screenshot could not be captured. ## Technical checks - TESOL route response: HTTP 200. - Updated card content in rendered HTML: present. - Level 5 TESOL designation: present. - Provider #791236, award requirements, and verification action: present. - Scoped ESLint: passed with zero errors. - Browser screenshot, responsive visual comparison, interaction inspection, and console inspection: blocked with browser verification. ## Final result blocked --- # CVAT Social Impact Emoji Design QA ## Source visual truth - Source: mobile social-impact-card screenshot attached in the user request. - Displayed source pixels: 316 x 460. - Target state: CVAT social-impact cause cards showing text markers (`EDU`, `FOOD`, and `CARE`) plus the `SIP` managed-by badge. - Requested outcome: replace all four markers with appropriate emojis while preserving the surrounding card design. ## Rendered implementation - Route: `http://localhost:3000/masterclass/cambridge-veritas-voice-and-accent-trainer-certification`. - Implemented values: 📚 for education, 🍲 for food support, ❤️ for child care, and 🤝 for the managed-by badge. - Implementation screenshot: unavailable because the in-app browser could not initialize in this environment. - Browser viewport and console inspection: unavailable. ## Full-view and focused comparison evidence - The existing left marker slot and card layout are preserved. - CVAT now opts into a 24px cause-emoji treatment and a 20px managed-by emoji treatment with tight line height. - CVIM retains its original `EDU`, `FOOD`, and `CARE` text markers and existing component styling. - A visual side-by-side comparison could not be produced without a browser-rendered implementation screenshot. ## Required fidelity surfaces - Fonts and typography: passed at code level; surrounding headings, descriptions, and status labels are unchanged. - Spacing and layout rhythm: passed at code level; card spacing and structure are unchanged. - Colours and visual tokens: passed; card backgrounds, borders, text colours, and status colours are unchanged. - Image and icon quality: code-level pass; the user explicitly requested native emoji, rendered at 24px in the existing icon slot. - Copy and content: passed; only the four decorative text markers were replaced. ## Technical checks - CVAT route response: HTTP 200. - CVAT emoji values and emoji styling, including the 🤝 managed-by marker: present in rendered HTML. - CVIM emoji styling: absent; original `EDU` and `SIP` markers remain present. - Scoped ESLint: passed with zero errors. - Browser screenshot and console verification: blocked. ## Final result blocked --- # CVAT Mobile Curriculum Cards Design QA ## Source visual truth - Source: mobile curriculum-card screenshot attached in the user request. - Displayed source pixels: 370 x 473. - Target state: collapsed CVAT curriculum cards on a narrow mobile viewport. - Requested outcome inferred from the preceding sticky-bar task: reduce the cards' vertical footprint on mobile without changing their desktop presentation. ## Rendered implementation - Route: `http://localhost:3000/masterclass/cambridge-veritas-voice-and-accent-trainer-certification`. - Required state: mobile viewport, curriculum section visible, cards collapsed except for the currently selected accordion item. - Implementation screenshot: unavailable because the in-app browser could not initialize in this environment. - Browser viewport, console inspection, and image-to-image comparison: unavailable. ## Full-view and focused comparison evidence - Source evidence shows two-line headings combined with wrapped metadata and generous padding, producing tall collapsed cards. - The revised mobile card uses 12px padding, a 36px number badge, 14px/20px title type, 11px/16px metadata, 8px card gaps, and grouped non-breaking metadata labels. - Expanded content is also tightened on mobile through reduced padding and chip sizing. - At `md` and above, the original padding, spacing, badge size, title size, metadata size, icon size, expanded-content spacing, and chip sizing are restored. - A focused screenshot comparison could not be produced without a browser-rendered implementation capture. ## Required fidelity surfaces - Fonts and typography: code-level pass. Existing family, weights, colours, and content are preserved; mobile sizes and line heights are intentionally reduced. - Spacing and layout rhythm: code-level pass. Collapsed-card padding drops from 16px vertical to 12px, and inter-card spacing drops from 12px to 8px on mobile. - Colours and visual tokens: passed. Burgundy, gold, ivory, border, and background tokens are unchanged. - Image and icon quality: passed at code level. Existing Lucide icons remain; no image assets were added or substituted. - Copy and content: passed. Titles, durations, lesson labels, topics, and accordion behavior are preserved. ## Findings and comparison history - P2 excessive mobile curriculum-card height: addressed with a denser CVAT-only mobile layout and grouped metadata labels. - Desktop and cross-course regression risk: addressed with `md` resets and a CVAT-only `mobileCompact` data flag. - Post-fix visual evidence: blocked because the required browser-rendered screenshot could not be captured. ## Technical checks - CVAT route response: HTTP 200. - CVAT compact curriculum markup: present. - CVIM compact curriculum markup: absent; original shared-card markup remains present. - Scoped ESLint: passed with zero errors. - Accordion content and copy: preserved. - Interaction and browser-console verification: blocked with browser verification. ## Final result blocked