Repository navigation
feat(webkit): add the banner marketing component - #993
Merged
isaque-bock-azion merged 5 commits intoOct 6, 2026
Merged
Conversation
Measured with section-title and card-grid present: the component composes them, so its own branch could not measure it.
gabriel-lisboa-azion
marked this pull request as ready for review
October 2, 2026 12:45
isaque-bock-azion
added a commit
that referenced
this pull request
Oct 6, 2026
* chore(webkit): register the marketing component category * feat(theme): add the illustration and marketing animation tokens * feat(webkit): add the illustration scene registry * fix(webkit): let a consumer mark the hatch state on a frame box * chore(storybook): add the illustration and marketing story assets * chore(theme): drop the illustration and flow animation tokens * feat(webkit): add NetworkMap, a decorative dotted world map with lit PoPs * feat(webkit): ship the agent and analyst logo assets and three new illustration scenes * fix(webkit): budget a code-split entry on its initial chunk * style(webkit): drop the implementation comments from the illustration, frame-box and brand marks * test(storybook): regenerate linux baselines for the NetworkMap stories * style(webkit): format the brand marks and tsconfig * test(storybook): regenerate linux baselines for the Illustration stories * fix(webkit): regenerate the network-map dot grid * feat(webkit): add the texture-material marketing component (#991) * feat(webkit): add the texture-material marketing component * feat(webkit): update texture-material to the current design * style(webkit): drop the implementation comments from texture-material * feat(webkit): let texture-material fade out along an axis * docs(storybook): add the marketing section templates (#1055) * docs(storybook): add the marketing section templates Register 25 marketing sections as Templates/Marketing stories, each a whole band composed from the marketing components with a runnable Show-code SFC, indexed by an Overview page grouped into Social Proof, Heroes, Content, Network and Media. ComparePlans ports the Pricing page's plan matrix. Storybook now mirrors the active theme onto data-theme so a story can swap theme-specific artwork, sorts the template groups, and stops forcing the heading font on overline-styled headings. * docs(storybook): soften the network template's map fades on phone and tablet The phone map's top fade drops from 25% to 10%, so Europe at the top right of the box keeps full ink, and from md to lg the desktop map's left fade holds full ink to 70% and reaches zero at the band's edge instead of 50% / 80%. * feat(webkit): add the logo and illustration asset library (#1047) * feat(webkit): add the client, certification, competitor and hero mark library Ships the customer marks (with dark, light and symbol variants and the registries that resolve them), the compliance certification badges, the competitor marks, three hero scenes and four more illustration scenes as per-file asset exports. The catalog classifies every ./src/assets export as an asset rather than a component. * chore(webkit): refresh the infrastructure-as-code and low-latency scenes * refactor(webkit): name marks brand-type-colormode and export assets by file name - assets is two folders: illustrations/ (the hero drawings folded in) and logos/ with agents, analysts, certifications, clients, competitors, frameworks and standards - every logo is <brand>-<extended|symbol>-<color|reversed|mono>; the dark/, light/ and symbols/ folders and the -logo / -reversed suffixes are gone - every asset is exported by its file name alone (./assets/<file>), so a file can move between folders without breaking an import; the registries are ./assets/client-registry and ./assets/competitor-registry - the 24px tile registry merges into the client registry; the unread `wordmark` field and ten same-drawing duplicates are removed * chore(hooks): let stories import webkit assets under camelCase bindings * docs(storybook): show the illustration files and their flat imports * chore(webkit): draw quick-start-with-templates with the hero art and export the file * test(storybook): regenerate linux baselines for the Illustration Files story * feat(webkit): give MadeiraMadeira a color logo for light surfaces Add madeiramadeira-extended-color and madeiramadeira-symbol-color, each with its flat ./assets/<file> export and catalog entry, and redraw madeiramadeira-extended-reversed from the same source so the two differ only in the wordmark ink. The registry entry now sets logoLight to the color wordmark instead of artwork: 'light', which inverted the white file on the light theme and turned the orange mark blue. * docs(storybook): group Foundations into Design Tokens and Assets, and add the Logos page (#1053) * feat(webkit): repaint illustration scenes from the theme (#1050) - Illustration draws its scene as inline SVG and repaints every export colour through an `--illustration-*` role, so the one dark-drawn library follows light and dark and any `[data-theme]` subtree it renders in. - @aziontech/theme gains the `illustration` foundation: 21 roles, each aliasing an existing semantic token (canvas, surface, border, text, primary, accent, code and status tokens). - Each instance scopes the SVG's internal ids, so two scenes on one page never resolve each other's gradients, masks or filters. Masks, clip paths, filters and translucent ground shadows are never repainted. - palette.ts maps every colour the library draws with; the suite fails on an unlisted one. Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): move hero into the marketing category (#1006) * feat(webkit): move hero into the marketing category * feat(webkit): add an eyebrow prefix to the hero title and stand the ticker on the hero floor * style(webkit): drop the implementation comments from hero * feat(webkit): give hero a size scale, a media alignment and a screen offset * test(webkit): import hero-title's stories from the branch's story tree * feat(webkit): let hero set the pitch of its backdrop and floor textures Hero forwarded a texture's kind and fade to TextureMaterial but never its size, so a page that wanted a finer lattice had to rebuild the layer in the background slot. textureSize and floorTextureSize pass the pitch through, matching media-split and media-tabs; both default to medium, so existing bands render unchanged. * feat(webkit): give hero's medium band the xxl block padding --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the topic marketing component (#1018) * feat(webkit): add the topic marketing component * feat(webkit): let a topic link as one whole claim --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the sticky-stack marketing component (#1020) * feat(webkit): add the sticky-stack marketing component * fix(webkit): pin sticky-stack below its sticky offset instead of padding under it * style(webkit): drop the implementation comments from sticky-stack * feat(webkit): ground sticky-stack's pinned frame on a lines texture Raises the first budget from 4 KB to 5.75 KB: the pinned frame now composes texture-material, measured at 5.25 KB gzip on the integrated tree. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the section-module marketing component (#1016) * feat(webkit): add the section-module marketing component * fix(webkit): set section-module's first budget from the integrated measure Measured with section-title and card-grid present: the component composes them, so its own branch could not measure it. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): move section-title into the marketing category (#1017) * feat(webkit): move section-title into the marketing category * feat(webkit): add a size scale to section-title * style(webkit): drop the implementation comments from section-title --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the section-container marketing component (#1014) Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the quote-carousel marketing component (#1013) * feat(webkit): add the quote-carousel marketing component * feat(webkit): compose quote-carousel cards from carousel items * style(webkit): drop the implementation comments from quote-carousel --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the quote marketing component (#1012) * feat(webkit): add the quote marketing component * feat(webkit): update quote to the current design * feat(webkit): give quote inline, signed and highlight registers * feat(webkit): floor the highlight quote's attribution when the band stretches it In `highlight`, a quote taller than its content gives the slack to the quotation, so the attribution and the actions sit on one floor across quotes of different lengths. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the media-tabs marketing component (#1009) * feat(webkit): add the media-tabs marketing component * feat(webkit): update media-tabs to the current design * feat(webkit): autoplay media-tabs and ground its media column on a texture Raises the first budget from 4 KB to 6.5 KB: the band now composes texture-material for its media ground and carries the autoplay timer, measured at 6.10 KB gzip on the integrated tree. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): move section-gap into the marketing category (#1015) * feat(webkit): move section-gap into the marketing category * feat(webkit): tick every corner of section-gap * style(webkit): drop the implementation comments from section-gap * feat(webkit): add the embed marketing component (#1003) * feat(webkit): add the embed marketing component * chore(webkit): re-approve the embed spec checksum The spec body was edited after approval and the checksum was never refreshed, so enforce-spec-exists hard-blocked every Write to the component's .vue. The body passes the full spec-validate battery and the .vue matches it 1-to-1, so only the stamp is restamped; the body is untouched. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the faq marketing component (#1004) * feat(webkit): add the faq marketing component * feat(webkit): update faq to the current design --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the banner marketing component (#993) * feat(webkit): add the banner marketing component * feat(webkit): update banner to the current design * fix(webkit): set banner's first budget from the integrated measure Measured with section-title and card-grid present: the component composes them, so its own branch could not measure it. * style(webkit): drop the implementation comments from banner --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the carousel marketing component (#999) * feat(webkit): add the carousel marketing component * feat(webkit): update carousel to the current design * style(webkit): drop the implementation comments from carousel --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the content-columns marketing component (#1002) * feat(webkit): add the content-columns marketing component * chore(webkit): re-approve the content-columns spec checksum The spec body was edited after approval and the checksum was never refreshed, so enforce-spec-exists hard-blocked every Write to the component's .vue. The body passes the full spec-validate battery and the .vue matches it 1-to-1, so only the stamp is restamped; the body is untouched. * feat(webkit): update content-columns to the current design * fix(webkit): set content-columns's first budget from the integrated measure Measured with section-title and card-grid present: the component composes them, so its own branch could not measure it. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the big-numbers marketing component (#995) * feat(webkit): add the big-numbers marketing component * chore(webkit): re-approve the big-numbers spec checksum The spec body was edited after approval and the checksum was never refreshed, so enforce-spec-exists hard-blocked every Write to the component's .vue. The body passes the full spec-validate battery and the .vue matches it 1-to-1, so only the stamp is restamped; the body is untouched. * style(webkit): drop the implementation comments from big-numbers --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the call-to-action marketing component (#997) * feat(webkit): add the call-to-action marketing component * feat(webkit): update call-to-action to the current design * fix(webkit): set call-to-action's first budget from the integrated measure Measured with section-title and card-grid present: the component composes them, so its own branch could not measure it. * style(webkit): drop the implementation comments from call-to-action --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the bento-grid marketing component (#994) * feat(webkit): add the bento-grid marketing component * feat(webkit): update bento-grid to the current design * style(webkit): drop the implementation comments from bento-grid --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the card-grid marketing component (#998) * feat(webkit): add the card-grid marketing component * style(webkit): drop the implementation comments from card-grid --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the ticker marketing component (#1035) * feat(webkit): add the ticker marketing component * style(webkit): drop the implementation comments from ticker * fix(webkit): load the ticker's marks before the marquee runs Raises the first budget from 4 KB to 4.5 KB: the marks now resolve into a shallow map before the track starts, measured at 4.05 KB gzip on the integrated tree. * fix(webkit): repeat a short ticker row until it fills the strip A row narrower than the strip left a gap in the loop. The ticker measures the strip against one row and repeats the row as often as needed, scaling the duration with it so the speed stays constant. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the media-split marketing component (#1008) * feat(webkit): add the media-split marketing component * feat(webkit): add orientation, media fill, band link, align and size to media-split * style(webkit): drop the implementation comments from media-split * feat(webkit): frame media-split's copy and media as two cells A framed band, or one inside a band-stack (read from its context), draws its top and bottom rules with no marks and frames the copy cell and the media cell as two frame-boxes, each with its four registration marks. Needs band-stack's injection-key.ts, so it lands together with the band-stack PR. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the media-tile marketing component (#1037) * feat(webkit): add the media-tile marketing component * docs(webkit): point media-tile's spec at topic instead of feature-card * feat(webkit): add fluid and mediaScale to media-tile `fluid` stretches the media to the frame's width with its aspect ratio locked; `mediaScale` scales the media around its centre inside a frame that keeps its size. The budget moves 2.5 to 2.75 KB: the entry measures 2,583 B gzipped. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the logo-wall marketing component (#1007) * feat(webkit): add the logo-wall marketing component * feat(webkit): build logo-wall on card-grid frame cells with linked story cells * feat(webkit): add a rectangle kind and an aside panel to logo-wall * feat(webkit): frame logo-wall's aside like its cells The aside panel is a frame-box with all four registration marks and draws the seam to the wall: a top rule below lg, a left rule from lg up. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the quote-tabs marketing component (#1042) * feat(webkit): add the quote-tabs marketing component * feat(webkit): advance quote-tabs on a timer with a progress hairline `autoPlay` (default on) moves to the next client every `autoPlayInterval` ms, pausing under the pointer or keyboard focus, restarting on a selection and never running under reduced motion. `showProgress` fills a hairline along the panel's bottom edge while the timer runs. The budget moves 19 to 20.75 KB: the entry measures 20,800 B gzipped. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * feat(webkit): add the band-stack marketing component (#1036) * feat(webkit): add the band-stack marketing component * feat(webkit): frame each band-stack band as two cells Each band keeps its top and bottom rules but no marks of its own. The stack provides a context (band-stack/injection-key.ts) that tells a media-split band to frame its copy and media cells as two frame-boxes, left and right, each with its four registration marks, so both sides of every seam are ticked. --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * test(storybook): regenerate linux baselines for the network-map * feat(webkit): add the column-navigation marketing component (#1001) * feat(webkit): add the column-navigation marketing component * feat(webkit): update column-navigation to the current design * style(webkit): drop the implementation comments from column-navigation --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com> * fix(webkit): drop the empty size-limit entry and baseline the calc fallback zeros * test(storybook): regenerate linux baselines --------- Co-authored-by: Isaque dos Santos <isaque.santos@azion.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
call-to-action, which is a single-column closing ask.@aziontech/webkit/banner.How to test
pnpm storybook:dev→ open Components/Marketing/Banner. Every story renders, and "Show code" is a runnable SFC you can paste.pnpm --filter @aziontech/webkit test -- src/components/marketing/banner→ the co-located browser suite passes.pnpm webkit:type-check→ clean.Notes
section-title; merge that PR first. Until then this branch's checks are red on the missing import — that is expected, not a defect in this component.feature/marketing-components, which carries the shared foundation (marketing category registration, illustration scene registry, theme tokens, story assets).main.