barua-ui 0.8.0 → 0.9.0

package/css/components/marketing.css

@@ -166,6 +166,118 @@
   .b-rating__stars .b-icon { width: 0.95rem; height: 0.95rem; fill: currentColor; }
   .b-rating__stars .is-empty { color: var(--b-fill); }
 
+  /* ---- Marquee: a row that keeps moving ------------------------------------
+     For a line of marks too long to stand still: logos, integrations, the
+     names a product works with. The track holds the list TWICE and travels
+     exactly half its width, which is what makes the loop seamless; with one
+     copy it visibly snaps. It pauses under the pointer so a name can be read,
+     and it stops entirely for anyone who asked for less motion, where it
+     becomes an ordinary scrolling row instead. --b-marquee-time is the pace. */
+  .b-marquee {
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
+    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
+  }
+  .b-marquee__track {
+    display: flex;
+    align-items: center;
+    gap: clamp(var(--b-space-6), 5vw, var(--b-space-12));
+    width: max-content;
+    animation: b-marquee var(--b-marquee-time, 40s) linear infinite;
+  }
+  .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
+  @keyframes b-marquee { to { translate: -50% 0; } }
+  @media (prefers-reduced-motion: reduce) {
+    .b-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
+    .b-marquee__track { animation: none; }
+  }
+
+  /* ---- Quote card: a number, a sentence, and who said it -------------------
+     The shape a case study takes on a product page. The figure leads because
+     it is what gets remembered, the sentence earns it, and the name is what
+     makes either believable. On the accent by default, because this is the
+     one card on the page that is meant to interrupt. */
+  .b-quote-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--b-space-6);
+    padding: clamp(var(--b-space-6), 4vw, var(--b-space-10));
+    color: var(--b-color-on-accent);
+    background: var(--b-color-accent);
+    border-radius: var(--b-radius-2xl);
+    color-scheme: dark;
+  }
+  .b-quote-card__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--b-space-4);
+  }
+  .b-quote-card__stat {
+    font-size: clamp(2.5rem, 6vw, 4rem);
+    font-weight: var(--b-weight-bold);
+    letter-spacing: var(--b-tracking-tight);
+    line-height: 1;
+  }
+  .b-quote-card__stat-label { font-size: var(--b-text-footnote); opacity: 0.75; }
+  .b-quote-card__quote {
+    /* The base layer gives every blockquote a quieter ink and a rule, which is
+       right in prose and wrong here: on the accent it renders as dark text on
+       a saturated field. The card owns its own colour, so the quote takes it. */
+    margin: 0;
+    padding: 0;
+    border: 0;
+    color: inherit;
+    font-size: clamp(1.125rem, 2vw, 1.5rem);
+    line-height: var(--b-leading-snug);
+    text-wrap: pretty;
+  }
+  .b-quote-card__name { font-weight: var(--b-weight-semibold); }
+  .b-quote-card__role { font-size: var(--b-text-footnote); opacity: 0.75; }
+
+  /* ---- Resource card: something to go and read ----------------------------
+     A picture, what kind of thing it is, and enough of the first line to
+     decide. The whole card is the link, and the plate stands in when there is
+     no picture, so a row of three never has a hole in it. */
+  .b-resource-card {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    color: inherit;
+    text-decoration: none;
+    background: var(--b-surface);
+    border: 1px solid var(--b-separator);
+    border-radius: var(--b-radius-xl);
+    transition: translate var(--b-duration-normal) var(--b-ease-out), box-shadow var(--b-duration-normal);
+  }
+  .b-resource-card:hover { text-decoration: none; }
+  @media (hover: hover) {
+    .b-resource-card:hover { translate: 0 -2px; box-shadow: var(--b-elevation-3); }
+  }
+  .b-resource-card__poster {
+    position: relative;
+    aspect-ratio: 16 / 9;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--b-color-accent) 14%, var(--b-fill-tertiary));
+  }
+  .b-resource-card__poster :is(img, svg) { width: 100%; height: 100%; object-fit: cover; }
+  .b-resource-card__type {
+    position: absolute;
+    inset-block-start: var(--b-space-3);
+    inset-inline-start: var(--b-space-3);
+  }
+  .b-resource-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--b-space-2);
+    padding: var(--b-space-4);
+  }
+  .b-resource-card__title { font-weight: var(--b-weight-semibold); line-height: var(--b-leading-snug); }
+  .b-resource-card__excerpt { font-size: var(--b-text-footnote); color: var(--b-text-secondary); }
+
   /* ---- Logo wall: the companies already here ------------------------------- */
   /* A quiet row, evenly spaced, every mark the same height whatever its
      proportions — which is the only way a wall of logos looks deliberate
@@ -213,6 +325,21 @@
   }
   .b-figure--bleed { margin-inline: calc(var(--b-space-6) * -1); }
   .b-figure--bleed .b-figure__frame { border-radius: 0; }
+  /* A picture that dissolves into the page instead of ending.
+
+     The product shot under a hero is not a photograph with a bottom edge; it
+     is a window into the thing, and a hard edge with a shadow under it asks
+     the reader to look at the frame rather than through it. The mask fades the
+     last stretch to nothing, so the screen appears to continue past the fold.
+     --b-fade-from is where the fade begins. The shadow and the bottom corners
+     go with it: both would draw the cut the mask is there to hide. */
+  .b-figure--fade .b-figure__frame {
+    -webkit-mask-image: linear-gradient(to bottom, #000 var(--b-fade-from, 55%), transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 var(--b-fade-from, 55%), transparent 100%);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    box-shadow: none;
+  }
 
   /* ---- Alternating rows: picture beside prose ------------------------------ */
   .b-feature-row {

package/dist/index.cjs

@@ -194,6 +194,8 @@ __export(index_exports, {
   MarketingNav: () => MarketingNav,
   MarketingNavBrand: () => MarketingNavBrand,
   MarketingNavLinks: () => MarketingNavLinks,
+  Marquee: () => Marquee,
+  MarqueeTrack: () => MarqueeTrack,
   MediaPlaceholder: () => MediaPlaceholder,
   Menu: () => Menu,
   MenuBar: () => MenuBar,
@@ -224,6 +226,13 @@ __export(index_exports, {
   Progress: () => Progress,
   PromoBand: () => PromoBand,
   Quote: () => Quote,
+  QuoteCard: () => QuoteCard,
+  QuoteCardHead: () => QuoteCardHead,
+  QuoteCardName: () => QuoteCardName,
+  QuoteCardQuote: () => QuoteCardQuote,
+  QuoteCardRole: () => QuoteCardRole,
+  QuoteCardStat: () => QuoteCardStat,
+  QuoteCardStatLabel: () => QuoteCardStatLabel,
   RadarChart: () => RadarChart,
   Radio: () => Radio,
   Rail: () => Rail,
@@ -233,6 +242,11 @@ __export(index_exports, {
   RatingStars: () => RatingStars,
   Resizable: () => Resizable,
   ResizeHandle: () => ResizeHandle,
+  ResourceCard: () => ResourceCard,
+  ResourceCardBody: () => ResourceCardBody,
+  ResourceCardExcerpt: () => ResourceCardExcerpt,
+  ResourceCardPoster: () => ResourceCardPoster,
+  ResourceCardTitle: () => ResourceCardTitle,
   Result: () => Result,
   Reveal: () => Reveal,
   SafeArea: () => SafeArea,
@@ -2301,6 +2315,20 @@ var Rating = block("p", "b-rating", "Rating");
 var RatingStars = block("span", "b-rating__stars", "RatingStars");
 var LogoWall = block("div", "b-logo-wall", "LogoWall");
 var LogoWallLogo = block("span", "b-logo-wall__logo", "LogoWallLogo");
+var Marquee = block("div", "b-marquee", "Marquee");
+var MarqueeTrack = block("div", "b-marquee__track", "MarqueeTrack");
+var QuoteCard = block("article", "b-quote-card", "QuoteCard");
+var QuoteCardHead = block("div", "b-quote-card__head", "QuoteCardHead");
+var QuoteCardStat = block("p", "b-quote-card__stat", "QuoteCardStat");
+var QuoteCardStatLabel = block("p", "b-quote-card__stat-label", "QuoteCardStatLabel");
+var QuoteCardQuote = block("blockquote", "b-quote-card__quote", "QuoteCardQuote");
+var QuoteCardName = block("p", "b-quote-card__name", "QuoteCardName");
+var QuoteCardRole = block("p", "b-quote-card__role", "QuoteCardRole");
+var ResourceCard = block("a", "b-resource-card", "ResourceCard");
+var ResourceCardPoster = block("div", "b-resource-card__poster", "ResourceCardPoster");
+var ResourceCardBody = block("div", "b-resource-card__body", "ResourceCardBody");
+var ResourceCardTitle = block("p", "b-resource-card__title", "ResourceCardTitle");
+var ResourceCardExcerpt = block("p", "b-resource-card__excerpt", "ResourceCardExcerpt");
 
 // src/system.tsx
 var import_react17 = require("react");
@@ -3099,6 +3127,8 @@ function usePersistedState(key, initial) {
   MarketingNav,
   MarketingNavBrand,
   MarketingNavLinks,
+  Marquee,
+  MarqueeTrack,
   MediaPlaceholder,
   Menu,
   MenuBar,
@@ -3129,6 +3159,13 @@ function usePersistedState(key, initial) {
   Progress,
   PromoBand,
   Quote,
+  QuoteCard,
+  QuoteCardHead,
+  QuoteCardName,
+  QuoteCardQuote,
+  QuoteCardRole,
+  QuoteCardStat,
+  QuoteCardStatLabel,
   RadarChart,
   Radio,
   Rail,
@@ -3138,6 +3175,11 @@ function usePersistedState(key, initial) {
   RatingStars,
   Resizable,
   ResizeHandle,
+  ResourceCard,
+  ResourceCardBody,
+  ResourceCardExcerpt,
+  ResourceCardPoster,
+  ResourceCardTitle,
   Result,
   Reveal,
   SafeArea,