Figma Passport — MVP Demo

The MVP Demo tab inside #mvpDemo (the "Demonstration" screen).

Source: file Agent (9gjEinYPK6zby7CkShjxTm) · page UI Pages · frame 1:75487 "MVP Demo".
Reference: 1920 × 1080. Conversion law: Figma px ÷ 10 = rem (html{font-size:calc(100vw/192)}). The component keeps its existing vh() sizing — a user decision: tweak values, not layout.
Extracted: 2026-08-01, direct-read from the Design-mode Properties panel via claude-in-chrome (Dev Mode paywalled; REST rate-limited). The values are inspector reads, not estimates.
Code target: frontend/src/components/MvpDemo/MvpDemo.{tsx,section.module.scss}; i18n mvpDemo.text.

Frame

MVP Demo 1920×1080. Background linear gradient rgba(231,239,249,1) → rgba(124,164,207,1) — the page background, provided by the landing page, not by this component.
Main frame (1920×1080, vertical, padding 64, gap 64) → [ Upper transition (top nav), Frame 186, Down transition (bottom nav), Navigation bar ]. The nav bars are cross-screen navigation and are not part of this component (the same call as on the Demo screen).
Frame 186 content row: horizontal, Fill 1792×824, padding L/R 64, gap 205 → contains the card.

Vertical Auto Layout. Width 1420 · Height 824 · Radius 20 · Border 2px · Padding 12 · Gap 24. Content centred.

Fill: linear gradient (top → bottom, 180°), 3 stops:
- rgba(46,94,153,1) #2E5E99 (Baltic) @ 0 %
- rgba(187,208,231,0.5) @ 50 %
- rgba(230,184,76,1) #E6B84C (Sunflower Gold) @ 100 %
Border: style Button Stroke (Light) — an angular white conic stroke, INSIDE. Corner angles for the 1420×824 box: atan(1420/824) = 59.9° → TR 59.9 · BR 120.1 · BL 239.9 · TL 300.1 (the mirror of the Demo card's 540×762 / 35.3° version). Use @include fs-angular-border.
Shadow: "Glass tameplate" = X16 Y16 Blur24 Spread0 rgba(0,0,0,0.16).

Vertical, gap 24, padding 12, centred.

AMADEQ text (1:75505): SVG, 550×128, fill Logo Gradient (white → white). Asset assets/icons/brand/AMADEQ text.svg.
play (1:75506): 256×256 circle, shadow Meddium Shadow X12 Y12 Blur12 rgba(0,0,0,0.25). Asset assets/icons/brand/Play.svg (280×280 viewBox, a 256 circle with the shadow baked into the SVG filter — renders 1:1).
Product Demo (1:75511): the text "Product Demo" — Space Grotesk 700 Bold, 24px, LH 100 %, LS 0 %, centred. Colour Lemon Chiffon rgba(255,242,194) #FFF2C2. Effect Text Shadow (Gold) = 2px 2px 4px rgba(0,0,0,0.5). Not uppercase.

Property	Current	Figma	Action
Card width	`vh(1240)`	1420	→ `vh(1420)`
Card radius	`vh(40)`	20	→ `vh(20)`
Card border	`1px rgba(255,255,255,.1)`	2px Button Stroke (Light), angular	→ `fs-angular-border` (corners 59.9 / 120.1 / 239.9 / 300.1)
Card shadow	`0 vh(40) vh(100) rgba(0,0,0,.25)`	16/16/24/0 @ 0.16	→ `vh(16) vh(16) vh(24) rgba(0,0,0,.16)`
`.text` casing	`text-transform: uppercase` + `ls vh(1)`	Title case, LS 0	Remove uppercase, LS 0
`.text` shadow	`0 vh(2) vh(4) rgba(0,0,0,.5)`	2/2/4 rgba(0,0,0,.5)	→ `vh(2) vh(2) vh(4)`
`.text` gap	`margin-top: vh(20)`	gap 24	→ `vh(24)`
play size	Intrinsic 280	256 circle (= 280 SVG)	Set `width: vh(280)` so it scales with the card
i18n `mvpDemo.text`	"Service demonstration"	"Product Demo"	Change the EN caption
Card fill gradient	3 stops as above	Identical	✓ no change

The bottom and top nav bars are the shared section switcher, kept as the SectionSwitch component rather than recreated here.
Non-English locales keep their translated caption; only EN was updated to "Product Demo" for a 1:1 match.