ferst-core 0.1.0 → 0.2.0

package/components/recipes/FeatureCards.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * FeatureCards — a Level-2 recipe: an optional section header over a responsive
+ * grid of cards, each with an optional icon, a title, text, and an optional
+ * link. Composes the Card, Icon, Heading and Button primitives.
+ */
+import Heading from '../blocks/Heading.astro';
+import Card from '../Card.astro';
+import Icon from '../Icon.astro';
+import Button from '../Button.astro';
+import { isIconKey } from '../../lib/icons';
+
+interface Props {
+  title?: string;
+  intro?: string;
+  columns?: 2 | 3 | 4;
+  cards?: { icon?: string; title: string; text?: string; href?: string }[];
+}
+const { title, intro, columns = 3, cards = [] } = Astro.props;
+---
+
+<section class="b-feature-cards">
+  {(title || intro) && (
+    <div class="b-feature-cards__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-feature-cards__intro">{intro}</p>}
+    </div>
+  )}
+  <div class="b-feature-cards__grid" data-cols={columns}>
+    {cards.map((card) => (
+      <Card>
+        {card.icon && isIconKey(card.icon) && (
+          <span class="b-feature-cards__icon"><Icon name={card.icon} size={28} /></span>
+        )}
+        <h3 class="b-feature-cards__title">{card.title}</h3>
+        {card.text && <p class="b-feature-cards__text">{card.text}</p>}
+        {card.href && (
+          <span class="b-feature-cards__cta">
+            <Button href={card.href} variant="secondary" size="sm">Learn more</Button>
+          </span>
+        )}
+      </Card>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-feature-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-feature-cards__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-feature-cards__intro {
+    margin: 0;
+    color: var(--muted);
+    font-size: 1.0625rem;
+    line-height: 1.6;
+  }
+  .b-feature-cards__grid {
+    display: grid;
+    grid-template-columns: 1fr; /* mobile-first */
+    gap: 1.5rem;
+  }
+  @media (min-width: 48em) {
+    .b-feature-cards__grid[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-feature-cards__grid[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 64em) {
+    .b-feature-cards__grid[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-feature-cards__icon {
+    color: var(--gold);
+    margin-bottom: 0.5rem;
+    display: inline-flex;
+  }
+  .b-feature-cards__title {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    color: var(--fg);
+  }
+  .b-feature-cards__text {
+    margin: 0;
+    color: var(--muted);
+    line-height: 1.6;
+  }
+  /* Push the CTA to the bottom so a row of cards aligns its buttons regardless
+     of how much text each card has. Cards are equal height already (grid items
+     stretch), and Card is a flex column — margin-top:auto does the rest. */
+  .b-feature-cards__cta {
+    margin-top: auto;
+    padding-top: 1rem;
+  }
+</style>

package/components/recipes/Gallery.astro

@@ -0,0 +1,55 @@
+---
+/** Gallery — a Level-2 recipe: a responsive grid of images with optional
+ *  captions. (Distinct from the `grid` layout primitive, which holds arbitrary
+ *  child blocks; this one is image-specific.) */
+interface Props {
+  columns?: 2 | 3 | 4;
+  images?: { src: string; alt?: string; caption?: string }[];
+}
+const { columns = 3, images = [] } = Astro.props;
+---
+
+<div class="b-gallery" data-cols={columns}>
+  {images.map((img) => (
+    <figure class="b-gallery__item">
+      <img src={img.src} alt={img.alt ?? ''} loading="lazy" decoding="async" />
+      {img.caption && <figcaption>{img.caption}</figcaption>}
+    </figure>
+  ))}
+</div>
+
+<style>
+  .b-gallery {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  @media (min-width: 48em) {
+    .b-gallery[data-cols='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-gallery[data-cols='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-gallery[data-cols='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 64em) {
+    .b-gallery[data-cols='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-gallery__item {
+    margin: 0;
+  }
+  .b-gallery__item img {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+    border-radius: 6px;
+  }
+  .b-gallery__item figcaption {
+    margin-top: 0.4rem;
+    color: var(--muted);
+    font-size: 0.875rem;
+    text-align: center;
+  }
+</style>

package/components/recipes/Hero.astro

@@ -0,0 +1,191 @@
+---
+/**
+ * Hero — the first Level-2 recipe: a curated page-opening band that composes
+ * primitives (Heading + Button) into a designed layout. Two presets: `centered`
+ * (stacked and centred) and `split` (text beside an image). Recipes are locked
+ * components so quality can't drift (BLOCK-ARCHITECTURE §6).
+ */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+
+interface Props {
+  eyebrow?: string;
+  title: string;
+  subtitle?: string;
+  cta?: { label: string; href: string };
+  image?: { src: string; alt?: string };
+  media?: { image?: string; video?: string; poster?: string; overlay?: number };
+  layout?: 'centered' | 'split' | 'media';
+  background?: 'none' | 'mesh';
+}
+const { eyebrow, title, subtitle, cta, image, media, layout = 'centered', background = 'none' } = Astro.props;
+const isMedia = layout === 'media' && media && (media.video || media.image);
+const overlay = (media?.overlay ?? 45) / 100;
+const isMesh = background === 'mesh' && !isMedia;
+---
+
+<section
+  class="b-hero"
+  data-layout={layout}
+  data-bg={isMesh ? 'mesh' : undefined}
+  style={isMedia ? `--hero-overlay: ${overlay}; ${media?.image && !media?.video ? `--hero-image: url('${media.image}')` : ''}` : undefined}
+>
+  {isMedia && (
+    <div class="b-hero__bg" aria-hidden="true">
+      {media?.video ? (
+        <video autoplay muted loop playsinline poster={media.poster}>
+          <source src={media.video} />
+        </video>
+      ) : null}
+      <span class="b-hero__scrim"></span>
+    </div>
+  )}
+  {isMesh && <div class="b-hero__mesh" aria-hidden="true"></div>}
+  <div class="b-hero__text">
+    {eyebrow && <p class="b-hero__eyebrow">{eyebrow}</p>}
+    <Heading text={title} level={1} align={layout === 'split' ? 'start' : 'center'} />
+    {subtitle && <p class="b-hero__subtitle">{subtitle}</p>}
+    {cta && (
+      <div class="b-hero__cta">
+        <Button href={cta.href} variant={layout === 'media' ? 'cta' : 'primary'}>{cta.label}</Button>
+      </div>
+    )}
+  </div>
+  {layout === 'split' && image && (
+    <div class="b-hero__media">
+      <img src={image.src} alt={image.alt ?? ''} loading="eager" decoding="async" />
+    </div>
+  )}
+</section>
+
+<style>
+  .b-hero {
+    display: grid;
+    gap: 2rem;
+    padding-block: 3rem;
+  }
+  @media (min-width: 48em) {
+    .b-hero[data-layout='split'] {
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+    }
+  }
+  .b-hero__text {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .b-hero[data-layout='centered'] .b-hero__text {
+    max-width: var(--max);
+    margin-inline: auto;
+    align-items: center;
+    text-align: center;
+  }
+  .b-hero__eyebrow {
+    margin: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--gold);
+  }
+  .b-hero__subtitle {
+    margin: 0;
+    font-size: 1.125rem;
+    line-height: 1.6;
+    color: var(--muted);
+    max-width: var(--max);
+  }
+  .b-hero__cta {
+    margin-top: 0.5rem;
+  }
+
+  /* ── Mesh background: a soft, slowly drifting brand gradient behind the text.
+     Low opacity + blur keeps normal (dark) text perfectly readable. ── */
+  .b-hero[data-bg='mesh'] {
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--radius);
+    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 3rem);
+  }
+  .b-hero__mesh {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--bg);
+  }
+  .b-hero__mesh::before {
+    content: '';
+    position: absolute;
+    inset: -25%;
+    background:
+      radial-gradient(35% 45% at 20% 25%, var(--gold), transparent 70%),
+      radial-gradient(35% 45% at 80% 20%, var(--accent-2, var(--gold)), transparent 70%),
+      radial-gradient(40% 50% at 65% 85%, var(--gold-light), transparent 70%);
+    opacity: 0.35;
+    filter: blur(50px);
+    animation: b-hero-mesh 20s ease-in-out infinite alternate;
+  }
+  @keyframes b-hero-mesh {
+    from { transform: translate3d(-3%, -2%, 0) scale(1.05); }
+    to { transform: translate3d(3%, 4%, 0) scale(1.18); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .b-hero__mesh::before { animation: none; }
+  }
+  .b-hero__media img {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+
+  /* ── Media layout: full-bleed image/video background with a legibility scrim ── */
+  .b-hero[data-layout='media'] {
+    position: relative;
+    min-height: min(68vh, 38rem);
+    display: grid;
+    place-items: center;
+    text-align: center;
+    padding: clamp(3rem, 8vw, 6rem) 1.5rem;
+    border-radius: var(--radius);
+    overflow: hidden;
+    isolation: isolate;
+  }
+  .b-hero__bg {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-image: var(--hero-image, none);
+    background-size: cover;
+    background-position: center;
+    background-color: var(--bg-section);
+  }
+  .b-hero__bg video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .b-hero__scrim {
+    position: absolute;
+    inset: 0;
+    background: rgba(8, 10, 18, var(--hero-overlay, 0.45));
+  }
+  .b-hero[data-layout='media'] .b-hero__text {
+    max-width: var(--max);
+    align-items: center;
+    color: #fff;
+  }
+  .b-hero[data-layout='media'] .b-hero__subtitle {
+    color: rgba(255, 255, 255, 0.9);
+    margin-inline: auto;
+  }
+  .b-hero[data-layout='media'] .b-hero__eyebrow {
+    color: #fff;
+    opacity: 0.9;
+  }
+  .b-hero[data-layout='media'] :global(h1) {
+    color: #fff;
+  }
+</style>

package/components/recipes/Logos.astro

@@ -0,0 +1,77 @@
+---
+/** Logos — a Level-2 recipe: a "trusted by" wall of images. Muted (greyscale +
+ *  dimmed) by default, coming to full colour on hover/focus. Each logo optionally
+ *  links out. Decorative-leaning, so it stays quiet against the page. */
+interface Item { src: string; alt?: string; href?: string }
+interface Props {
+  title?: string;
+  items?: Item[];
+}
+const { title, items = [] } = Astro.props;
+---
+
+<section class="b-logos">
+  {title && <p class="b-logos__title">{title}</p>}
+  <ul class="b-logos__row">
+    {items.map((item) => (
+      <li class="b-logos__item">
+        {item.href ? (
+          <a href={item.href} target="_blank" rel="noopener noreferrer">
+            <img src={item.src} alt={item.alt ?? ''} loading="lazy" decoding="async" />
+          </a>
+        ) : (
+          <img src={item.src} alt={item.alt ?? ''} loading="lazy" decoding="async" />
+        )}
+      </li>
+    ))}
+  </ul>
+</section>
+
+<style>
+  .b-logos {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-logos__title {
+    margin: 0;
+    text-align: center;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .b-logos__row {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: clamp(1.5rem, 5vw, 3.5rem);
+  }
+  .b-logos__item img {
+    display: block;
+    height: clamp(1.75rem, 4vw, 2.5rem);
+    width: auto;
+    filter: grayscale(1);
+    opacity: 0.6;
+    transition: filter 0.2s ease, opacity 0.2s ease;
+  }
+  .b-logos__item a:hover img,
+  .b-logos__item a:focus-visible img,
+  .b-logos__item img:hover {
+    filter: grayscale(0);
+    opacity: 1;
+  }
+  .b-logos__item a:focus-visible {
+    outline: 2px solid var(--gold);
+    outline-offset: 4px;
+    border-radius: 4px;
+  }
+</style>

package/components/recipes/Marquee.astro

@@ -0,0 +1,75 @@
+---
+/** Marquee — a Level-2 recipe: an infinite horizontal scroll of short phrases
+ *  (a feature strip). Pure-CSS transform loop (GPU-composited); pauses on hover.
+ *  Under reduced-motion it doesn't move — the phrases wrap and centre statically.
+ *  The moving track is duplicated for a seamless loop and marked decorative. */
+interface Props {
+  items?: string[];
+  speed?: 'slow' | 'normal' | 'fast';
+}
+const { items = [], speed = 'normal' } = Astro.props;
+---
+
+<div class="b-marquee" data-speed={speed}>
+  <div class="b-marquee__track" aria-hidden="true">
+    {[...items, ...items].map((item) => (
+      <span class="b-marquee__item">{item}</span>
+    ))}
+  </div>
+</div>
+
+<style>
+  .b-marquee {
+    overflow: hidden;
+    border-block: 1px solid var(--border);
+    padding-block: 0.85rem;
+    background: var(--bg-section);
+    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
+  }
+  .b-marquee__track {
+    display: flex;
+    width: max-content;
+    gap: 0;
+    animation: b-marquee-scroll linear infinite;
+  }
+  .b-marquee[data-speed='slow'] .b-marquee__track { animation-duration: 45s; }
+  .b-marquee[data-speed='normal'] .b-marquee__track { animation-duration: 30s; }
+  .b-marquee[data-speed='fast'] .b-marquee__track { animation-duration: 18s; }
+  .b-marquee:hover .b-marquee__track { animation-play-state: paused; }
+
+  .b-marquee__item {
+    display: inline-flex;
+    align-items: center;
+    padding-inline: 1.75rem;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 0.95rem;
+    color: var(--fg);
+    white-space: nowrap;
+  }
+  .b-marquee__item::after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    margin-left: 3.5rem;
+    border-radius: 999px;
+    background: var(--gold);
+  }
+
+  @keyframes b-marquee-scroll {
+    from { transform: translateX(0); }
+    to { transform: translateX(-50%); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .b-marquee { -webkit-mask-image: none; mask-image: none; }
+    .b-marquee__track {
+      animation: none;
+      width: auto;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.25rem 0;
+    }
+  }
+</style>

package/components/recipes/Pricing.astro

@@ -0,0 +1,149 @@
+---
+/** Pricing — a Level-2 recipe: a row of plan cards (name, price, period,
+ *  feature list, CTA). One plan may be `featured`. Composes Heading + Button +
+ *  the check icon. Token-driven, so it recolours + restyles with the theme. */
+import Heading from '../blocks/Heading.astro';
+import Button from '../Button.astro';
+import Icon from '../Icon.astro';
+
+interface Plan {
+  name: string;
+  price: string;
+  period?: string;
+  description?: string;
+  features?: string[];
+  cta?: { label: string; href: string };
+  featured?: boolean;
+}
+interface Props {
+  title?: string;
+  intro?: string;
+  plans?: Plan[];
+}
+const { title, intro, plans = [] } = Astro.props;
+---
+
+<section class="b-pricing">
+  {(title || intro) && (
+    <div class="b-pricing__head">
+      {title && <Heading text={title} level={2} align="center" />}
+      {intro && <p class="b-pricing__intro">{intro}</p>}
+    </div>
+  )}
+  <div class="b-pricing__grid" data-count={plans.length}>
+    {plans.map((plan) => (
+      <div class="b-pricing__plan" data-featured={plan.featured ? 'true' : 'false'}>
+        {plan.featured && <span class="b-pricing__badge">Most popular</span>}
+        <p class="b-pricing__name">{plan.name}</p>
+        <p class="b-pricing__price">
+          <span class="b-pricing__amount">{plan.price}</span>
+          {plan.period && <span class="b-pricing__period">{plan.period}</span>}
+        </p>
+        {plan.description && <p class="b-pricing__desc">{plan.description}</p>}
+        {plan.features && plan.features.length > 0 && (
+          <ul class="b-pricing__features">
+            {plan.features.map((f) => (
+              <li><span class="b-pricing__check" aria-hidden="true"><Icon name="check" size={16} /></span>{f}</li>
+            ))}
+          </ul>
+        )}
+        {plan.cta && (
+          <div class="b-pricing__cta">
+            <Button href={plan.cta.href} variant={plan.featured ? 'cta' : 'secondary'}>{plan.cta.label}</Button>
+          </div>
+        )}
+      </div>
+    ))}
+  </div>
+</section>
+
+<style>
+  .b-pricing {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    max-width: 72rem;
+    margin-inline: auto;
+    padding-inline: 1rem;
+  }
+  .b-pricing__head {
+    max-width: var(--max);
+    margin-inline: auto;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .b-pricing__intro { margin: 0; color: var(--muted); line-height: 1.6; }
+  .b-pricing__grid {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    align-items: start;
+  }
+  @media (min-width: 48em) {
+    .b-pricing__grid[data-count='2'] { grid-template-columns: repeat(2, 1fr); }
+    .b-pricing__grid[data-count='3'] { grid-template-columns: repeat(3, 1fr); }
+    .b-pricing__grid[data-count='4'] { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (min-width: 64em) {
+    .b-pricing__grid[data-count='4'] { grid-template-columns: repeat(4, 1fr); }
+  }
+  .b-pricing__plan {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1.75rem;
+    border-radius: var(--radius);
+    border: var(--card-border);
+    background: var(--bg-surface);
+    box-shadow: var(--shadow-md);
+  }
+  .b-pricing__plan[data-featured='true'] {
+    border-color: var(--gold);
+    box-shadow: var(--shadow-lg);
+    position: relative;
+  }
+  .b-pricing__badge {
+    align-self: flex-start;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text-light);
+    background: var(--gold);
+    padding: 0.2rem 0.6rem;
+    border-radius: var(--radius-pill);
+  }
+  .b-pricing__name {
+    margin: 0;
+    font-family: var(--font-heading);
+    font-weight: 600;
+    font-size: 1.1rem;
+    color: var(--fg);
+  }
+  .b-pricing__price { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; }
+  .b-pricing__amount {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem);
+    line-height: 1;
+    color: var(--fg);
+  }
+  .b-pricing__period { color: var(--muted); font-size: 0.9rem; }
+  .b-pricing__desc { margin: 0; color: var(--muted); line-height: 1.5; }
+  .b-pricing__features {
+    list-style: none;
+    margin: 0.5rem 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    color: var(--muted);
+    line-height: 1.5;
+  }
+  .b-pricing__features li { display: flex; gap: 0.5rem; align-items: flex-start; }
+  .b-pricing__check { color: var(--gold); display: inline-flex; margin-top: 0.1rem; flex-shrink: 0; }
+  .b-pricing__cta { margin-top: auto; padding-top: 0.5rem; }
+  .b-pricing__cta :global(.btn) { width: 100%; }
+</style>