Five elements from latlonguas.com's Beaver Builder modules; info-list and slide-box extended; seven mapped

public/demo/slide-box-cards.json

@@ -3,6 +3,8 @@
     { "icon": "mug-hot", "title": "Coffee", "text": "Roasted on Tuesdays, sold by Friday.", "backText": "Two house blends and a single origin that changes each month. Ask at the counter for a taste of whatever is on the grinder.", "cta": { "text": "See this month’s beans", "href": "#slide-box-demo" }, "direction": "up" },
     { "icon": "truck-fast", "title": "Delivery", "text": "Beans at your door in two days.", "backText": "Order by noon and it ships the same day, in a bag that keeps the beans fresh for a month.", "cta": { "text": "How delivery works", "href": "#slide-box-demo" }, "direction": "left" },
     { "image": "promo.svg", "imageAlt": "", "title": "Wholesale", "text": "For cafés, offices and restaurants.", "backText": "Weekly deliveries, a grinder on loan and a morning of barista training for your staff.", "cta": { "text": "Ask for a price list", "href": "#slide-box-demo" }, "direction": "down" },
-    { "icon": "calendar-check", "title": "Tasting mornings", "text": "Tap or click: this one ignores hover.", "backText": "The first Saturday of each month, 9 to 11. Six coffees, one table, no booking needed.", "cta": { "text": "Next dates", "href": "#slide-box-demo" }, "direction": "right", "trigger": "click" }
+    { "icon": "calendar-check", "title": "Tasting mornings", "text": "Tap or click: this one ignores hover.", "backText": "The first Saturday of each month, 9 to 11. Six coffees, one table, no booking needed.", "cta": { "text": "Next dates", "href": "#slide-box-demo" }, "direction": "right", "trigger": "click" },
+    { "image": "gallery-ridge.svg", "imageAlt": "", "title": "Where it grows", "text": "The photo is the card.", "backText": "Our single origins come from three farms on the same ridge, picked by hand and dried on raised beds.", "cta": { "text": "Meet the farms", "href": "#slide-box-demo" }, "direction": "up", "variant": "image" },
+    { "image": "gallery-coast.svg", "imageAlt": "", "title": "The roastery", "text": "A round card.", "backText": "Visit on Fridays and watch a batch go from green to brown.", "cta": { "text": "Plan a visit", "href": "#slide-box-demo" }, "direction": "up", "variant": "image", "shape": "circle" }
   ]
 }

scripts/check-catalog.mjs

@@ -154,6 +154,7 @@ const NEEDS_INPUT = [
   'flip-box', 'hotspot', 'info-circle', 'info-list', 'map', 'modal', 'news-ticker',
   'responsive-table', 'slide-box', 'social-grid', 'tabcordion', 'tabs', 'testimonial-carousel',
   'video-background', 'video-gallery', 'video-player', 'cart', 'product-list', 'product-page',
+  'counter', 'logo-grid', 'photo-gallery', 'call-to-action',
 ];
 const plainText = (v) => typeof v === 'string' && v.trim() === v && v.length > 0;
 for (const e of catalog) {

scripts/check-categories.mjs

@@ -61,6 +61,7 @@ const GOLDEN = {
   'business-hours': 'content',
   map: 'content',
   'responsive-table': 'content',
+  counter: 'content',
 
   'before-after': 'media',
   'video-player': 'media',
@@ -69,6 +70,8 @@ const GOLDEN = {
   'card-slider': 'media',
   'testimonial-carousel': 'media',
   icon: 'media',
+  'logo-grid': 'media',
+  'photo-gallery': 'media',
   'image-effects': 'media',
 
   countdown: 'conversion',
@@ -80,6 +83,7 @@ const GOLDEN = {
   cart: 'conversion',
   'product-list': 'conversion',
   'product-page': 'conversion',
+  'call-to-action': 'conversion',
 
   notice: 'feedback',
   toast: 'feedback',
@@ -92,6 +96,7 @@ const GOLDEN = {
   tags: 'controls',
   'link-effects': 'controls',
   'cookie-consent': 'controls',
+  separator: 'controls',
 };
 
 const MIN_PER_CATEGORY = 3;

src/components/demos/CallToActionDemo.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * Demo for `call-to-action`. The website renders this too (see README, "Consumed by
+ * superherotech.ai"), so every host token has a fallback. It uses no assets.
+ *
+ * Three bands: stacked and centred on the accent (UABB's Call to Action as latlonguas.com's
+ * home page has it), inline on dark with a phone link in the text (Beaver Builder's "cta" on
+ * its DC-FRZ page), and a light one with two buttons. Only the first is a region landmark.
+ */
+import CallToAction from '../../library/call-to-action/CallToAction.astro';
+---
+<div class="demo-cta" id="call-to-action-demo">
+  <CallToAction
+    title="Looking for pricing, or just exploring?"
+    text="Either way, it takes a minute to get in touch, and we answer the same day."
+    buttons={[{ text: 'Drop us a line', href: '#call-to-action-demo' }]}
+  />
+  <CallToAction title="Ready to find out more?" layout="inline" tone="dark" landmark={false} buttons={[{ text: 'Request a call back', href: '#call-to-action-demo' }]}>
+    <p>Read the questions people often ask below, or call us on <a href="tel:+15555550123">(555) 555-0123</a>.</p>
+  </CallToAction>
+  <CallToAction
+    title="Book a free site visit"
+    text="We come to you, look at the job and send a written price within two days."
+    tone="light"
+    landmark={false}
+    buttons={[
+      { text: 'Book a visit', href: '#call-to-action-demo' },
+      { text: 'See our prices', href: '#call-to-action-demo' },
+    ]}
+  />
+</div>
+<style>
+  .demo-cta {
+    --cta-accent-bg: var(--purple, #5933d8);
+    display: grid;
+    gap: 1.5rem;
+  }
+</style>

src/components/demos/CounterDemo.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * Demo for `counter`. The website renders this too (see README, "Consumed by
+ * superherotech.ai"), so every host token has a fallback. It uses no assets.
+ *
+ * Three rows: rings (the UABB "circle" look latlonguas.com uses), plain figures with a prefix
+ * and a suffix, and bars against a stated maximum. Each counts once as it scrolls into view;
+ * under reduced motion the final figures simply show.
+ */
+import Counter from '../../library/counter/Counter.astro';
+---
+<div class="demo-cn">
+  <section>
+    <h2 class="demo-cn__h">This year, so far</h2>
+    <Counter
+      style="ring"
+      label="This year, so far"
+      items={[
+        { value: 1427, label: 'flights' },
+        { value: 263, label: 'locations' },
+        { value: 100, suffix: '%', label: 'licensed pilots' },
+      ]}
+    />
+  </section>
+  <section>
+    <h2 class="demo-cn__h">The workshop in numbers</h2>
+    <Counter
+      label="The workshop in numbers"
+      items={[
+        { value: 12, suffix: '+', label: 'years in business' },
+        { value: 380, label: 'five-star reviews' },
+        { value: 48, prefix: '$', suffix: 'k', label: 'raised for the food bank' },
+      ]}
+      class="demo-cn__plain"
+    />
+  </section>
+  <section>
+    <h2 class="demo-cn__h">Spring course places</h2>
+    <Counter
+      style="bar"
+      align="start"
+      label="Spring course places taken"
+      items={[
+        { value: 18, max: 20, label: 'Beginners', note: 'of 20 places taken' },
+        { value: 9, max: 16, label: 'Improvers', note: 'of 16 places taken' },
+      ]}
+    />
+  </section>
+</div>
+<style>
+  .demo-cn {
+    --cn-accent: var(--purple, #5933d8);
+    display: grid;
+    gap: 2.75rem;
+    color: var(--ink, #16192a);
+  }
+  .demo-cn__h {
+    margin: 0 0 1.25rem;
+    font-size: 1.35rem;
+  }
+</style>