@deriv-com/dds-marketing 1.1.2 → 1.1.3

package/.llm/components/tableheadercell.md

@@ -2,6 +2,10 @@
 
 # TableHeaderCell
 
+The name of one table column.
+
+## Why it is built this way
+
 The name of a column, announced before every value under it. That is the whole of why it is a component rather than a styled cell: a screen reader reads the header before each cell in the column, which is how a reader knows what a number means without looking it up — and it only happens if the header is a header in the markup.
 
 Where the column can be sorted, the header holds the control that sorts it. A button rather than a click handler on the cell, because sorting is an action: it has to be reachable by keyboard, announced as pressable, and able to say which way the column is currently ordered.

package/.llm/components/tablerow.md

@@ -2,6 +2,10 @@
 
 # TableRow
 
+One row of a Table.
+
+## Why it is built this way
+
 One row of a table: the cells that answer the same questions in the same order as every other row. It owns the rule under it and whether it reads as picked, and nothing about what any cell holds.
 
 Being picked is drawn here rather than on the checkbox that sets it, because selection is a fact about the row: a reader scanning a table needs to see which rows are in the set without checking every box in the first column.

package/.llm/components/tablist.md

@@ -2,6 +2,10 @@
 
 # TabList
 
+Switches between views of the same content.
+
+## Why it is built this way
+
 A strip of comparable versions of one thing, one of them showing at a time. What it says is that these are the same offer seen differently — a billing period, a platform, a market class — rather than places the site has. Two at least: selected means selected against something, and a strip of one is a heading that highlights.
 
 It holds which tab is current and nothing else. The content each tab reveals belongs to the page, because a marketing page already has all of it written and the strip is only deciding which slice shows. That is why there is no panel here and no ARIA tab role: role="tab" is a promise about a tabpanel this component cannot see, and a promise it cannot keep is worse than the group it actually is.

package/.llm/components/teamgrid.md

@@ -2,6 +2,10 @@
 
 # TeamGrid
 
+A grid of the people behind a company, with photo, name and role.
+
+## Why it is built this way
+
 A section that sets out the people behind a company: a heading, and a grid of people under it — each a square photograph, their name, what they do and, where they have one, a link to a profile of theirs elsewhere. The first few show at once, and a button under the grid shows the rest and hides them again.
 
 One column on a phone, two from the fold and four at full width, so the first four people are one row on a desktop and the button under that row is what makes the list longer.

package/.llm/components/testimonialrow.md

@@ -2,6 +2,10 @@
 
 # TestimonialRow
 
+An overall rating over a scrollable row of customer reviews.
+
+## Why it is built this way
+
 A section that lets a review service's numbers back the page: a heading with the overall rating under it — and a way to where the reviews were collected — over a row of rated reviews the reader moves along, each a short review under its star rating with the reviewer's name, and two arrows under the row that step it a card at a time. Several are in view at once and nothing moves on its own.
 
 The reference design's Testimonial in its review-row form. It names no review platform: the score, its wording and where it links are the page's, so the same section serves whichever service the reviews came from.

package/.llm/components/testimonialslider.md

@@ -2,6 +2,10 @@
 
 # TestimonialSlider
 
+Customer quotes shown one at a time, each with who said it.
+
+## Why it is built this way
+
 A section that lets the people who use the product say what it did for them: a heading over one quote at a time, in a card, with the name of who said it. Two or more quotes rotate in place — one in view, the next fading in where it stood — and dots show where the reader is and move to any quote pressed.
 
 The reference design's Testimonial in its quote form. Its review-row form — rated reviews collected by a review service — is TestimonialRow.

package/.llm/components/textarea.md

@@ -2,6 +2,10 @@
 
 # TextArea
 
+A field for a longer message, such as on a contact form.
+
+## Why it is built this way
+
 A field for what a visitor wants to say in their own words — the message on a contact form, the 'tell us about your project' on an enquiry, the reason someone is applying to partner. One value still, like TextInput, but a value with no shape the page can guess at.
 
 That is the whole reason it is not TextInput with a taller box. A single line shows a reader a sliver of what they wrote and no way to read it back, and the one place they most want to check themselves is the paragraph they are about to send a stranger. So it grows as they type, up to a limit, and past that limit it scrolls rather than pushing the submit button off the screen.

package/.llm/components/textinput.md

@@ -2,6 +2,10 @@
 
 # TextInput
 
+A single-line text field.
+
+## Why it is built this way
+
 One line of text a visitor types before they are a customer. A marketing page asks for very little and has no standing to ask for more: an email for a newsletter, a name and a message on a contact form, a work address to book a demo. Every one of those is a stranger deciding whether the thing on offer is worth handing something over for, and the field is where that decision gets made or lost.
 
 That is the whole difference from a field in an application, and it is why this is not Product's TextInput with fewer props. An app's field is filled by someone who has already signed up, inside a task they have committed to, and can afford to ask for an account number in a particular format. A landing page's field is filled by someone with no account, no stake, and a back button — so it asks for one thing, says what it will do with it, and is legible enough at a glance that nobody has to work out what goes in it.
@@ -438,7 +442,7 @@ Ornaments and furniture, none of which is the label. A glyph names nothing and a
 
 ```tsx
 import { TextInput } from '@deriv-com/dds-marketing'
-import { EnvelopeRegularIcon, LockRegularIcon } from '@deriv-com/quill-icons-web'
+import { EnvelopeRegularIcon, LockRegularIcon } from '@deriv-com/dds-marketing/icons'
 
 // prefix — a head you should not have to type
 <TextInput label="Website" type="url" prefix="https://" placeholder="example.com" />

package/.llm/components/textscroll.md

@@ -2,6 +2,10 @@
 
 # TextScroll
 
+One large statement whose words brighten as the reader scrolls.
+
+## Why it is built this way
+
 A full-width section holding one large statement — a mission, a brand message — whose words brighten one after another as the reader scrolls past, from dimmed to full strength, so the sentence is read at the pace the page is moved.
 
 The reference design's TextScroll. The reveal is scrubbed by the scroll itself rather than timed: each word runs down the section's own view timeline a step behind the one before it, forward as the reader scrolls down and back again as they scroll up, and stands still while the page does. The sentence is in the page's first HTML as one paragraph of real words and spaces, so a reader with no script, a browser with no scroll timeline and a reader who asked for less movement all get the whole statement at full strength from the start; the dim is only ever something the scroll applies.

package/.llm/components/tiers.md

@@ -2,6 +2,10 @@
 
 # Tiers
 
+A row of partnership tiers, each with what it offers and how to reach it.
+
+## Why it is built this way
+
 A partnership-tier section: a centred heading over an ordered row of tiers, each a medal, a name and the stage it stands for, a card stating what the tier gives, and the bar a partner clears to reach it — with an optional way on under the row.
 
 It shows how rewards grow with performance, Bronze to Platinum, and the order is the argument: each tier is a step up from the one before it. The tiers are a real ordered list, so the count and each tier's place reach a screen reader too. At full width they share one row and a rule runs through the medals, joining them into one track; below that they fall to two columns and then one, where each tier's words start at the edge.

package/.llm/components/typography.md

@@ -2,6 +2,10 @@
 
 # Typography
 
+Sets text in one of the type roles.
+
+## Why it is built this way
+
 Copy, set in one of the page's type roles. It is the component that finally separates what a line of text is in the document from how large it is drawn — `as` says the first and `variant` says the second, and neither implies the other.
 
 That separation is the whole reason it exists. Every heading role in this package carries the same sentence — a size, not an instruction — because a page that wants a hero-sized line reaches for h1 and gets an <h1>, and the second one on the page is a document with two top-level headings. Here the scale is a prop and the element is a different prop, so a section heading set at hero scale is `as="h2" variant="h1"` and says exactly that.

package/.llm/digest/accordion.md

@@ -2,7 +2,7 @@
 
 # Accordion
 
-A stack of rows whose headings stay and whose detail is put away until the reader asks for it. …
+A stack of headings whose detail expands when the reader asks for it
 
 `import { Accordion } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/accordionitem.md

@@ -2,7 +2,7 @@
 
 # AccordionItem
 
-One row of an Accordion: a heading that is always there, and the detail under it that is not. …
+One row of an Accordion: a heading that stays, and detail that expands
 
 `import { AccordionItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/aspectratio.md

@@ -2,7 +2,7 @@
 
 # AspectRatio
 
-A box that holds one shape whatever is put in it, so a page reserves the room a picture will take before the picture arrives. …
+Holds its content to a fixed shape and reserves the space before it loads
 
 `import { AspectRatio } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/awards.md

@@ -2,7 +2,7 @@
 
 # Awards
 
-A section of social proof that lists the industry awards a company has won, each a badge between two laurels: a laurel, the award's name and its issuer, and the same laurel mirrored. …
+Lists the industry awards a company has won, each framed between two laurels
 
 `import { Awards } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/background.md

@@ -2,7 +2,7 @@
 
 # Background
 
-A ground a section or a block sits on, painted with a pattern rather than a flat fill — a halftone, an aurora, a mesh, a rule grid or rings. …
+A patterned ground for a section to sit on
 
 `import { Background } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/badge.md

@@ -2,7 +2,7 @@
 
 # Badge
 
-A short word marking something as new, chosen or reduced. …
+A short label marking something as new, chosen or reduced
 
 `import { Badge } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/bottomsheet.md

@@ -2,7 +2,7 @@
 
 # BottomSheet
 
-A panel that rises from the bottom edge to hold a single focused task on small screens. …
+A panel that rises from the bottom edge for one focused task on small screens
 
 `import { BottomSheet } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/breadcrumb.md

@@ -2,7 +2,7 @@
 
 # Breadcrumb
 
-The trail of ancestors above the current page on a marketing site, showing the visitor where they are in the site hierarchy. …
+Shows where the current page sits in the site, with links back up
 
 `import { Breadcrumb } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/breadcrumbitem.md

@@ -2,7 +2,7 @@
 
 # BreadcrumbItem
 
-One level in a Breadcrumb on a marketing site. It renders either a link back to that level or, for the level the visitor is already on, plain text marked as the current page. …
+One level in a Breadcrumb
 
 `import { BreadcrumbItem } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/button.md

@@ -2,7 +2,7 @@
 
 # Button
 
-Drives a visitor toward a conversion goal — a signup page, a pricing page, a demo booking — or performs the one action a section asks for, such as sending a newsletter form or opening a video. …
+Triggers the one action a section asks for, such as signing up
 
 `import { Button } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/buttonicon.md

@@ -2,7 +2,7 @@
 
 # ButtonIcon
 
-One press carried by a glyph alone, in the space a label would need. …
+Triggers an action with an icon alone
 
 `import { ButtonIcon } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/card.md

@@ -2,7 +2,7 @@
 
 # Card
 
-A surface that holds content belonging together. …
+A surface that groups related content
 
 `import { Card } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/cardbody.md

@@ -2,7 +2,7 @@
 
 # CardBody
 
-Everything a card holds: the words inset from its edges and the picture that reaches them, in one region. The surface around it keeps a fill and a corner and nothing else. …
+The content area of a Card, holding its text and picture
 
 `import { CardBody } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/cardbutton.md

@@ -2,7 +2,7 @@
 
 # CardButton
 
-A card that responds to a press. …
+A card that acts on press
 
 `import { CardButton } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/checkbox.md

@@ -2,7 +2,7 @@
 
 # Checkbox
 
-Records a single on-or-off choice that is submitted with the form around it rather than applied the moment it is ticked
+Records an on-or-off choice that is submitted with its form
 
 `import { Checkbox } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/comparisoncards.md

@@ -2,7 +2,7 @@
 
 # ComparisonCards
 
-A section that sets two to four options side by side under a heading, each a card of its own that repeats the same short rows — a label and this option's value — so a reader compares the options line by line: Spot against Futures, one account type against another. …
+Sets two to four options side by side as cards, so readers compare them row by row
 
 `import { ComparisonCards } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/comparisontable.md

@@ -2,7 +2,7 @@
 
 # ComparisonTable
 
-A comparison-table section for short, fixed column sets. It renders a rounded card with a light header row, horizontal dividers only, a bold first-column label, and two or three value columns. …
+Compares a short, fixed set of options in a table
 
 `import { ComparisonTable } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/ctabanner.md

@@ -2,7 +2,7 @@
 
 # CtaBanner
 
-A full-bleed coral band carrying one short promotion and the action it asks for — the strip that breaks a long page with the one thing the page wants done, or closes it. …
+A full-bleed band with one short promotion and the action it asks for
 
 `import { CtaBanner } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/ctabannerslider.md

@@ -2,7 +2,7 @@
 
 # CtaBannerSlider
 
-CtaBanner's layout with a slider in it: the same full-bleed coral band, rotating between two or three short promotions. …
+A full-bleed promotional band that rotates between two or three offers
 
 `import { CtaBannerSlider } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/datatable.md

@@ -2,7 +2,7 @@
 
 # DataTable
 
-A full-width data-table section for instrument and market-style listings. …
+A full-width table for instrument and market listings
 
 `import { DataTable } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/divider.md

@@ -2,7 +2,7 @@
 
 # Divider
 
-A rule between things, and the quietest way to say that what is on one side of it belongs to a different group from what is on the other. …
+A rule that separates one group of content from another
 
 `import { Divider } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/downloadbanner.md

@@ -2,7 +2,7 @@
 
 # DownloadBanner
 
-A section promoting the app's downloads: a card holding a heading and the stores' own badges, each a link to the product in that store. …
+Promotes the app with a heading and links to each app store
 
 `import { DownloadBanner } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/dropdownmenu.md

@@ -2,7 +2,7 @@
 
 # DropdownMenu
 
-A button that opens a short set of destinations. Pressing one goes somewhere and the menu shuts — it holds no value and reports no answer, so there is nothing about it to find on reopening. …
+A button that opens a short list of links
 
 `import { DropdownMenu } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/estimator.md

@@ -0,0 +1,66 @@
+<!-- GENERATED from estimator.contract.json. Do not edit. -->
+
+# Estimator
+
+Sets the page's own fields beside the figures worked out from them: a trading calculator, a converter, an income estimate
+
+`import { Estimator } from '@deriv-com/dds-marketing'`
+
+## Reach for it when
+
+- A page lets a reader work something out before they act — a margin, a pip value, a swap charge, a conversion, an income estimate
+- The figures change as the reader types or picks, and should be announced as they do
+- The same tool appears on several pages in several forms — the margin, pip and swap calculators are one layout with different fields and figures
+
+## Something else, when
+
+- The figures are fixed facts rather than the result of anything the reader enters → **Stats**
+- Options are compared side by side rather than worked out from an input → **ComparisonCards**
+- The tool is a form that sends something — a sign-up, a contact request → **FeatureSplit**
+
+## Never
+
+- Fetching or calculating anything. The block has no data source and no formula: a page that wants live prices or a margin computes them and passes the figures in, so the block stays the same on every page and in every test
+- A form that submits. Nothing here is sent anywhere; the way onward is a link or a button to the page that does the real thing
+- A table of many figures. Past six or so results the panel stops being an answer and becomes a listing, which is what DataTable is for
+
+## Props
+
+- **ground** `enum` · default "page" — Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. …
+  - `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+  - `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The one to reach for first when two sections need telling apart. …
+  - `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+  - never: Marking importance. Every section on a page painted dark is a page with no emphasis left, and a reader stops reading the grounds as meaning anything. Alternating for its own sake is the same mistake more slowly. And never the brand's own coral, `color.bg.brand`, which is not offered here. …
+- **layout** `enum` · default "stacked" — How the heading and the tool share the section at full width. On a phone both are one column whichever is chosen: the heading, then the card, the inputs above the results
+  - `stacked` — The default. The heading centred above a wide card, the inputs beside the results — a calculator with several fields and several figures, where the two panels each need room
+  - `split` — The heading and a few lines beside the card, the inputs above the results inside it — a compact tool a page introduces in its own words, a converter or a single estimate
+  - never: Varying between two tools on one page. Pick the layout the tool's size calls for, and the page reads as one system
+- **title** `string` · required — Always. What the tool works out, in a few words — 'Trading calculator', 'Buy crypto in seconds', 'Estimate your earnings'
+  - never: Instructions. How to use the tool is the fields' own labels, not the heading
+- **description** `string` · optional — A line or two under the title saying what the figures are for or where they come from — 'Live prices, updated every few seconds'
+  - never: A disclaimer the results depend on. That is a result's `note`, read beside the figure it qualifies
+- **inputsLabel** `string` · optional — A heading over the inputs panel, where the two panels need naming — 'Calculator' over the fields and 'Results' over the figures. Leave both out for a tool whose fields name themselves
+  - never: One panel only. Name both or neither
+- **inputs** `node` · required — Always. The fields the reader fills in — Select, TextInput, SearchInput, SegmentedControl, a slider — in the order they are filled. The page owns their values and works the results out from them
+  - never: A submit button. The results update as the fields change; the way onward is `action`
+- **inputActions** `node` · optional — A tool that works its figures out when asked rather than as the reader types — a calculation too slow or too costly to run on every keystroke, or one where half-filled fields would show figures that mislead. …
+  - never: A tool whose figures already follow the fields. A button that does what typing already did is a step the reader has to find and press for nothing
+- **onCalculate** `callback` · optional — Whenever inputActions holds a Calculate button: Enter in any of the fields calls it, as the button's own press does — wire the button's onClick to the same function. …
+  - never: Sending anything. The form never leaves the page; a tool that submits to a server is a form section, not this
+- **resultsLabel** `string` · optional — A heading over the results panel, with inputsLabel — 'Results', 'You receive'
+  - never: One panel only. Name both or neither
+- **results** `data` · required — The figures the inputs produce, in reading order — a `label`, a `value` written exactly as it is to be read, and an optional `note`. Pass an empty list until the inputs are complete, and the panel shows `emptyMessage` instead. …
+  - never: A value the page has not worked out. Pass nothing rather than a placeholder figure: a wrong number on a trading page is worse than none
+- **emptyMessage** `string` · optional — What the results panel says before there are figures to show — 'Choose an instrument to see the results'. Translate it with the page
+  - never: An error. A failed feed is the page's to say, in a result's note or its own message
+- **action** `node` · optional — The one thing a reader does once they have their figures — 'Open an account', 'Trade now', 'Become a partner'. Under the results, where the reader's eye already is
+  - never: More than one action. One tool, one next step
+
+## Inside it
+
+- 9 components are refused inside it; the list and the reasons are in the long document.
+- Renders 19 parts: root, inner, header, title, description, tool, panels, inputs, inputs-label, results, results-label, list, result, result-label, result-value, result-note, empty, action, input-actions.
+
+---
+
+The reasoning behind each of these, the parts this renders, its states and snippets that compile: `.llm/components/estimator.md`.

package/.llm/digest/faqaccordion.md

@@ -2,7 +2,7 @@
 
 # FaqAccordion
 
-A section of questions and answers: a heading over an Accordion, one question open at a time. …
+A section of questions and answers, one open at a time
 
 `import { FaqAccordion } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurebullets.md

@@ -2,7 +2,7 @@
 
 # FeatureBullets
 
-A section pairing a claim with a ruled list of what something includes, beside one picture. …
+Pairs a claim and a list of what is included with one picture
 
 `import { FeatureBullets } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurecards.md

@@ -2,7 +2,7 @@
 
 # FeatureCards
 
-A section that opens with a heading and sets a grid of cards under it — the shape a marketing page uses for “why choose us” and “what you get”. …
+A heading over a grid of feature cards
 
 `import { FeatureCards } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurecardscarousel.md

@@ -2,7 +2,7 @@
 
 # FeatureCardsCarousel
 
-A feature band that sets its cards in a row a reader moves along rather than a grid: a heading and a line over a row of the page's own cards, the next one's edge showing past the last in view, with dots saying where the reader is and two arrows stepping it a card at a time. …
+A heading over a row of feature cards the reader scrolls through
 
 `import { FeatureCardsCarousel } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurescroll.md

@@ -2,7 +2,7 @@
 
 # FeatureScroll
 
-A section that gives a set of things one screen each, with the picture pinned beside the words while a reader is on them. …
+Gives each feature a screen of its own, with its picture pinned beside the text
 
 `import { FeatureScroll } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featuresplit.md

@@ -2,7 +2,7 @@
 
 # FeatureSplit
 
-A section putting one claim, a line explaining it and a way onward beside a single picture. …
+One claim, a supporting line and a link, beside a single picture
 
 `import { FeatureSplit } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/featurestack.md

@@ -2,7 +2,7 @@
 
 # FeatureStack
 
-A section that leads with a statement and ends on a picture: a heading, a line under it where the heading needs one, a link on to more where the page has one, and a large illustration — a globe, a map, a product shot — standing on the band's foot. …
+A heading and supporting line above a large illustration
 
 `import { FeatureStack } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/filterchip.md

@@ -2,7 +2,7 @@
 
 # FilterChip
 
-A token the reader turns on and off in place, standing for one narrowing of the set shown beside it. …
+Turns one filter on or off, in place
 
 `import { FilterChip } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/footer.md

@@ -2,7 +2,7 @@
 
 # Footer
 
-The band that closes a marketing page, and the sections every one of them is made of: whose site this is, where else it goes, what the law obliges it to say, and the line that closes it. …
+The band that closes every marketing page: brand, links, legal text
 
 `import { Footer } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/footergroup.md

@@ -2,7 +2,7 @@
 
 # FooterGroup
 
-A named handful of destinations in the footer: a word over a short list. It is the footer's repeating unit and the only thing inside it that repeats — everything else in a footer appears once. …
+A titled list of links in the footer
 
 `import { FooterGroup } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/grid.md

@@ -2,7 +2,7 @@
 
 # Grid
 
-A field of equal tracks, and one measure between them. …
+Lays items out in equal columns with consistent spacing
 
 `import { Grid } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/icon.md

@@ -2,7 +2,7 @@
 
 # Icon
 
-Renders a Quill system glyph at a token size, taking its colour from the text around it. The glyph is imported from @deriv-com/quill-icons-web and passed as the only child. …
+Renders a Quill glyph at a token size, in the colour of the text around it
 
 `import { Icon } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/illustrationcard.md

@@ -2,7 +2,7 @@
 
 # IllustrationCard
 
-A pane of glass holding a piece of product information — a market's price, a balance, a status — in one of three shapes, used as a picture: laid over a photograph or a piece of art, or standing on its own as the image a section shows beside its words. …
+A glass card showing product information, used as an illustration
 
 `import { IllustrationCard } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/illustrationscene.md

@@ -2,7 +2,7 @@
 
 # IllustrationScene
 
-A photograph with an IllustrationCard laid over it — the product shown in the hands of the people who use it: a trade ticket over a trader on the move, a balance over someone at a desk. …
+A photograph with an IllustrationCard laid over it
 
 `import { IllustrationScene } from '@deriv-com/dds-marketing'`
 

package/.llm/digest/imagebanner.md

@@ -2,7 +2,7 @@
 
 # ImageBanner
 
-A dark card in the middle of a page, pairing a headline and a line under it with a photograph — beside it or behind it, with one action. …
+A dark card pairing a headline and one action with a photograph
 
 `import { ImageBanner } from '@deriv-com/dds-marketing'`
 
@@ -51,7 +51,7 @@ A dark card in the middle of a page, pairing a headline and a line under it with
   - never: A second action. The card asks for one thing
 - **media** `node` · required — Always. The page's photograph, through AspectRatio or as an image — people or product. Split and cover crop it to fill the space they give it. Alt text is the page's to give, empty where the photograph is decoration
   - never: Artwork with words in it. The cover photograph sits under a scrim and the text, and the split crops to fill
-- **parallax** `boolean` · default true — The photograph drifts against the scroll as the card passes through the view, by motion.distance.drift over the whole pass, so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
+- **parallax** `boolean` · default true — The photograph drifts against the scroll as the card passes through the view, the drift every block's picture shares — drawn at motion.scale.parallax and moved from motion.translate.parallax-from to motion.translate.parallax-to over the whole pass — so it reads as further away than the card — the reference design's ParallaxBanner, which this replaces. …
   - never: Holding still for a reader who asked for less motion — it already holds still for them, and in a browser that cannot drive it from the scroll
 
 ## Inside it

package/.llm/digest/landinghero.md

@@ -2,7 +2,7 @@
 
 # LandingHero
 
-The band that opens a main landing page: the one thing the page is about, said once, at the top, over a ground dark enough that nothing above it competes. One of three opening bands, and the widest. …
+Opens a main landing page with its headline over a dark background
 
 `import { LandingHero } from '@deriv-com/dds-marketing'`