Improvise a few Creative Component Variants

This is a "Blueprint" format of documentation. Blueprints provide context on patterns and practices that are already present in our project and codebase. Accompanying the blueprint will be other context items, and the direct action will be a prompt.

Goal

While retaining the overeall look and feel of our website, generate a few variants of a section that loads a web component according to the a JSON object that will have a list/array of objects containing content and paths.

Context

To stay consistent with the overall design, style, theme, and mode, you will need to review our CSS variables.s
  • site/src/styles/global.css
  • site/src/styles/lossless-theme.css

Stack

Our Extended Markdown

Our extended markdown support is robust but the code may not be simple to understand. The key element here is that on any of the components.

Acceptance Criteria

  • Running pnpm build and pnpm dev does not throw any errors.
  • The components can all render in the browser with the data passed to them.
  • The components all are consistent with the overall design, style, theme, and mode of our site.
  • At least one of the components looks like it solves for the objective, and has a "wow" factor.
  • If animations were not applied in the first iterations, we can apply animations to the components.