domma-cms 1.8.44 → 1.8.46

package/docs/starter-blocks.md

@@ -0,0 +1,203 @@
+# Domma block library
+
+Sixteen free, editable Custom Blocks come with every Domma CMS site. There is
+no extra licence or plugin to install. Search for `domma-block-` in **Blocks**
+or in the editor's **Add block** menu. Each block includes its own scoped CSS,
+a copyable example and documented parameters.
+
+## Choose a block
+
+| Block | Use it for |
+| --- | --- |
+| `domma-block-banner` | A photo banner with a readable overlay across its left half. |
+| `domma-block-split` | An image beside a section heading and introduction. |
+| `domma-block-cta` | A welcoming call to action using your site theme. |
+| `domma-block-hero` | A centred page introduction with an optional button. |
+| `domma-block-text` | A readable text section for your story or an introduction. |
+| `domma-block-features` | An introduction and up to three feature cards. |
+| `domma-block-service-card` | A reusable service card with an optional photo and button. |
+| `domma-block-testimonial` | A customer quotation with an optional attribution. |
+| `domma-block-stats` | Up to three useful figures with clear labels. |
+| `domma-block-steps` | A clear, numbered process with up to three steps. |
+| `domma-block-faq` | Up to three questions and answers, readable without JavaScript. |
+| `domma-block-contact` | Contact details, an address and opening hours. |
+| `domma-block-pricing-card` | A clear price or package card with an optional enquiry button. |
+| `domma-block-team-card` | A team member photo, role and short introduction. |
+| `domma-block-image` | An uncropped image with an optional caption. |
+| `domma-block-logos` | A responsive row of up to four organisation logos. |
+
+## Make it yours
+
+Replace example picture addresses with images from your Media library. Headings,
+introductions and other text parameters accept plain text. Use `alt` to describe
+an image, or leave it empty when the image is decorative. Add both `link` and
+`label` for a button; omit them to hide it. Unused feature, step, FAQ, figure and
+logo slots are hidden automatically.
+
+The banner and hero use an `h1` main heading. Choose one for each page; the other
+sections use `h2` headings, and individual service, team and price cards use
+`h3`. Place cards below a section heading. Image and card blocks can also go
+inside your usual grid or column shortcodes.
+
+All blocks adapt to smaller screens, use your site's theme where appropriate,
+and work without the Domma marketing stylesheet. FAQ questions and answers stay
+readable without JavaScript. Contact email and phone links
+open the visitor's usual apps. Prices are display text, so include your currency,
+billing period and any tax wording explicitly. Use your own real figures,
+approved customer quotes and organisation logos.
+
+Edit or duplicate a block to change its design. The CMS adds missing library
+files on startup and preserves existing HTML, CSS and metadata files. Existing
+sites receive new blocks when they upgrade to a CMS version that includes them.
+
+## Copy an example
+
+### domma-block-banner
+
+A photo banner with a readable overlay across its left half.
+
+```text
+[domma-block-banner header="A little guidance, or a helping hand." blurb="Find an answer, learn something new or get in touch." image="/media/banner.jpg" alt="People working together at a laptop" link="/contact" label="Get in touch" /]
+```
+
+### domma-block-split
+
+An image beside a section heading and introduction.
+
+```text
+[domma-block-split header="Made for your business" blurb="Tell visitors how you can help." image="/media/about.jpg" alt="Our workspace" link="/about" label="Meet us" /]
+```
+
+### domma-block-cta
+
+A welcoming call to action using your site theme.
+
+```text
+[domma-block-cta header="Have something in mind?" blurb="Tell us a little about your plans." link="/contact" label="Let us help" /]
+```
+
+### domma-block-hero
+
+A centred page introduction with an optional button.
+
+```text
+[domma-block-hero header="Welcome to your next chapter" blurb="Say what you do and who you help." link="/contact" label="Let us help" /]
+```
+
+### domma-block-text
+
+A readable text section for your story or an introduction.
+
+```text
+[domma-block-text header="Our story" blurb="Share a little about your business and the people behind it." /]
+```
+
+### domma-block-features
+
+An introduction and up to three feature cards.
+
+```text
+[domma-block-features header="How we help" blurb="Practical support for your business." title1="Plan" text1="Find the right direction." title2="Build" text2="Bring your ideas to life." title3="Grow" text3="Keep moving forward." /]
+```
+
+### domma-block-service-card
+
+A reusable service card with an optional photo and button.
+
+```text
+[domma-block-service-card header="Your service" blurb="Explain the benefit in a sentence or two." link="/services" label="Find out more" /]
+```
+
+### domma-block-testimonial
+
+A customer quotation with an optional attribution.
+
+```text
+[domma-block-testimonial quote="Replace this with a customer quotation you have permission to share." name="Customer name" detail="Business or role" /]
+```
+
+### domma-block-stats
+
+Up to three useful figures with clear labels.
+
+```text
+[domma-block-stats header="A few useful facts" value1="Your figure" label1="Explain what it represents" /]
+```
+
+### domma-block-steps
+
+A clear, numbered process with up to three steps.
+
+```text
+[domma-block-steps header="Getting started" blurb="A simple way forward." title1="Say hello" text1="Tell us what you need." title2="Make a plan" text2="Agree the details together." title3="Get going" text3="Put your plan into action." /]
+```
+
+### domma-block-faq
+
+Up to three questions and answers, readable without JavaScript.
+
+```text
+[domma-block-faq header="A few common questions" question1="How do we get started?" answer1="Get in touch and tell us what you have in mind." question2="Can I ask a question first?" answer2="Of course. We are happy to help." /]
+```
+
+### domma-block-contact
+
+Contact details, an address and opening hours.
+
+```text
+[domma-block-contact header="Get in touch" blurb="Tell us how we can help." email="hello@example.com" phone="+44 1234 567890" address="Your business address" hours="Your opening hours" /]
+```
+
+### domma-block-pricing-card
+
+A clear price or package card with an optional enquiry button.
+
+```text
+[domma-block-pricing-card header="Your package" price="Ask for a quote" blurb="Describe exactly what is included." link="/contact" label="Talk it through" /]
+```
+
+### domma-block-team-card
+
+A team member photo, role and short introduction.
+
+```text
+[domma-block-team-card name="Team member" role="Role or specialism" blurb="A short, friendly introduction." image="/media/team-member.jpg" alt="Portrait of your team member" /]
+```
+
+### domma-block-image
+
+An uncropped image with an optional caption.
+
+```text
+[domma-block-image image="/media/your-work.jpg" alt="Describe what visitors can see" caption="Add a little context to the image." /]
+```
+
+### domma-block-logos
+
+A responsive row of up to four organisation logos.
+
+```text
+[domma-block-logos header="Who we work with" image1="/media/partner-logo.svg" alt1="Partner name" /]
+```
+
+## Blocks in headers, footers and menus
+
+The running CMS already supports custom blocks in **Site Settings > Footer**.
+The selected blocks appear above the standard footer menus. Each footer entry
+is a block name, without per-placement parameters, so duplicate a starter block
+and replace its placeholders with your site's details before selecting it there.
+
+A custom block can also contain a menu shortcode, for example:
+
+```text
+[menu location="footer-primary" /]
+```
+
+Keep navigation links in Menus so visibility, nesting and current-page behaviour
+continue to come from the menu system. A block can supply the surrounding layout.
+
+Header block slots would be a useful next step: a shared announcement bar,
+contact strip or branded header around the existing navigation. They are a
+proposed extension, not part of this library change. Replacing the full navigation
+would also need to retain mobile controls, keyboard access and the visitor's
+current-page indication.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "1.8.44",
+  "version": "1.8.46",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",

package/server/blocks/catalog.json

@@ -0,0 +1,98 @@
+[
+    {
+        "name": "domma-block-banner",
+        "category": "introductions",
+        "description": "A photo banner with a readable overlay across its left half.",
+        "example": "[domma-block-banner header=\"A little guidance, or a helping hand.\" blurb=\"Find an answer, learn something new or get in touch.\" image=\"/media/banner.jpg\" alt=\"People working together at a laptop\" link=\"/contact\" label=\"Get in touch\" /]"
+    },
+    {
+        "name": "domma-block-split",
+        "category": "content",
+        "description": "An image beside a section heading and introduction.",
+        "example": "[domma-block-split header=\"Made for your business\" blurb=\"Tell visitors how you can help.\" image=\"/media/about.jpg\" alt=\"Our workspace\" link=\"/about\" label=\"Meet us\" /]"
+    },
+    {
+        "name": "domma-block-cta",
+        "category": "conversion",
+        "description": "A welcoming call to action using your site theme.",
+        "example": "[domma-block-cta header=\"Have something in mind?\" blurb=\"Tell us a little about your plans.\" link=\"/contact\" label=\"Let us help\" /]"
+    },
+    {
+        "name": "domma-block-hero",
+        "category": "introductions",
+        "description": "A centred page introduction with an optional button.",
+        "example": "[domma-block-hero header=\"Welcome to your next chapter\" blurb=\"Say what you do and who you help.\" link=\"/contact\" label=\"Let us help\" /]"
+    },
+    {
+        "name": "domma-block-text",
+        "category": "content",
+        "description": "A readable text section for your story or an introduction.",
+        "example": "[domma-block-text header=\"Our story\" blurb=\"Share a little about your business and the people behind it.\" /]"
+    },
+    {
+        "name": "domma-block-features",
+        "category": "services",
+        "description": "An introduction and up to three feature cards.",
+        "example": "[domma-block-features header=\"How we help\" blurb=\"Practical support for your business.\" title1=\"Plan\" text1=\"Find the right direction.\" title2=\"Build\" text2=\"Bring your ideas to life.\" title3=\"Grow\" text3=\"Keep moving forward.\" /]"
+    },
+    {
+        "name": "domma-block-service-card",
+        "category": "services",
+        "description": "A reusable service card with an optional photo and button.",
+        "example": "[domma-block-service-card header=\"Your service\" blurb=\"Explain the benefit in a sentence or two.\" link=\"/services\" label=\"Find out more\" /]"
+    },
+    {
+        "name": "domma-block-testimonial",
+        "category": "trust",
+        "description": "A customer quotation with an optional attribution.",
+        "example": "[domma-block-testimonial quote=\"Replace this with a customer quotation you have permission to share.\" name=\"Customer name\" detail=\"Business or role\" /]"
+    },
+    {
+        "name": "domma-block-stats",
+        "category": "trust",
+        "description": "Up to three useful figures with clear labels.",
+        "example": "[domma-block-stats header=\"A few useful facts\" value1=\"Your figure\" label1=\"Explain what it represents\" /]"
+    },
+    {
+        "name": "domma-block-steps",
+        "category": "services",
+        "description": "A clear, numbered process with up to three steps.",
+        "example": "[domma-block-steps header=\"Getting started\" blurb=\"A simple way forward.\" title1=\"Say hello\" text1=\"Tell us what you need.\" title2=\"Make a plan\" text2=\"Agree the details together.\" title3=\"Get going\" text3=\"Put your plan into action.\" /]"
+    },
+    {
+        "name": "domma-block-faq",
+        "category": "support",
+        "description": "Up to three questions and answers, readable without JavaScript.",
+        "example": "[domma-block-faq header=\"A few common questions\" question1=\"How do we get started?\" answer1=\"Get in touch and tell us what you have in mind.\" question2=\"Can I ask a question first?\" answer2=\"Of course. We are happy to help.\" /]"
+    },
+    {
+        "name": "domma-block-contact",
+        "category": "support",
+        "description": "Contact details, an address and opening hours.",
+        "example": "[domma-block-contact header=\"Get in touch\" blurb=\"Tell us how we can help.\" email=\"hello@example.com\" phone=\"+44 1234 567890\" address=\"Your business address\" hours=\"Your opening hours\" /]"
+    },
+    {
+        "name": "domma-block-pricing-card",
+        "category": "services",
+        "description": "A clear price or package card with an optional enquiry button.",
+        "example": "[domma-block-pricing-card header=\"Your package\" price=\"Ask for a quote\" blurb=\"Describe exactly what is included.\" link=\"/contact\" label=\"Talk it through\" /]"
+    },
+    {
+        "name": "domma-block-team-card",
+        "category": "trust",
+        "description": "A team member photo, role and short introduction.",
+        "example": "[domma-block-team-card name=\"Team member\" role=\"Role or specialism\" blurb=\"A short, friendly introduction.\" image=\"/media/team-member.jpg\" alt=\"Portrait of your team member\" /]"
+    },
+    {
+        "name": "domma-block-image",
+        "category": "content",
+        "description": "An uncropped image with an optional caption.",
+        "example": "[domma-block-image image=\"/media/your-work.jpg\" alt=\"Describe what visitors can see\" caption=\"Add a little context to the image.\" /]"
+    },
+    {
+        "name": "domma-block-logos",
+        "category": "trust",
+        "description": "A responsive row of up to four organisation logos.",
+        "example": "[domma-block-logos header=\"Who we work with\" image1=\"/media/partner-logo.svg\" alt1=\"Partner name\" /]"
+    }
+]

package/server/blocks/domma-block-banner.css

@@ -0,0 +1,65 @@
+.db-banner {
+    margin-block: 1.5rem;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: #152832;
+    color: #fff;
+}
+.db-banner-image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.db-banner-image[src=""], .db-banner-image:not([src]) { display: none; }
+.db-banner-panel {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    width: 50%;
+    min-height: 30rem;
+    padding: clamp(1.5rem, 4vw, 3.5rem);
+    background: rgb(13 30 40 / 92%);
+}
+.db-banner-heading {
+    margin: 0 0 1.25rem;
+    color: #fff;
+    font-size: clamp(2rem, 3.5vw, 3.25rem);
+    line-height: 1.12;
+    letter-spacing: -.02em;
+    overflow-wrap: anywhere;
+}
+.db-banner-blurb {
+    margin: 0;
+    color: #fff;
+    font-size: 1.1rem;
+    line-height: 1.7;
+    overflow-wrap: anywhere;
+    white-space: pre-line;
+}
+.db-banner a.db-banner-link {
+    display: inline-flex;
+    margin-top: 1.75rem;
+    padding: .8rem 1.3rem;
+    border: 2px solid #fff;
+    border-radius: var(--dm-radius, .5rem);
+    background: #fff;
+    color: #152832;
+    font-weight: 600;
+    line-height: 1.4;
+    text-decoration: none;
+    overflow-wrap: anywhere;
+}
+.db-banner a.db-banner-link:hover { background: #e8f1f5; color: #152832; }
+.db-banner a.db-banner-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
+.db-banner a.db-banner-link[href=""], .db-banner a.db-banner-link:not([href]), .db-banner a.db-banner-link:empty { display: none; }
+@media (max-width: 767px) {
+    .db-banner-image { position: relative; display: block; height: 15rem; }
+    .db-banner-panel { width: 100%; min-height: 0; padding: 1.75rem; }
+}

package/server/blocks/domma-block-banner.html

@@ -0,0 +1,22 @@
+<!--
+  domma-block-banner - A photo banner with a readable overlay across its left half.
+
+  Parameters:
+    header - Main page heading (h1; use once per page)
+    blurb  - Short introduction, as plain text
+    image  - Image address from your media library
+    alt    - Description of the image; leave empty for a decorative photo
+    link   - Optional button destination
+    label  - Optional button text
+
+  Example:
+    [domma-block-banner header="A little guidance, or a helping hand." blurb="Find an answer, learn something new or get in touch." image="/media/banner.jpg" alt="People working together at a laptop" link="/contact" label="Get in touch" /]
+-->
+<section class="db-banner">
+  <img class="db-banner-image" src="{{image}}" alt="{{alt}}" fetchpriority="high">
+  <div class="db-banner-panel">
+    <h1 class="db-banner-heading">{{header}}</h1>
+    <p class="db-banner-blurb">{{blurb}}</p>
+    <a class="db-banner-link db-banner-btn" href="{{link}}">{{label}}</a>
+  </div>
+</section>

package/server/blocks/domma-block-banner.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "introductions"
+    ]
+}

package/server/blocks/domma-block-contact.css

@@ -0,0 +1,18 @@
+.db-contact {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-contact-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-contact-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-contact-blurb:empty { display: none; }
+.db-contact-details { display: grid; gap: .75rem; margin-top: 1.5rem; font-style: normal; line-height: 1.7; }
+.db-contact-details p, .db-contact-hours { margin: 0; white-space: pre-line; line-height: 1.7; }
+.db-contact-hours { margin-top: 1rem; }
+.db-contact-link { justify-self: start; }
+.db-contact-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-contact-link:not([href]), .db-contact-link[href="mailto:"], .db-contact-link[href="tel:"], .db-contact-details p:empty, .db-contact-hours:empty { display: none; }

package/server/blocks/domma-block-contact.html

@@ -0,0 +1,15 @@
+<!--
+  domma-block-contact - Contact details, an address and opening hours.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+    email - Email address
+    phone - Phone number, including country code when useful
+    address - Postal address, as plain text
+    hours - Opening hours, as plain text
+
+  Example:
+    [domma-block-contact header="Get in touch" blurb="Tell us how we can help." email="hello@example.com" phone="+44 1234 567890" address="Your business address" hours="Your opening hours" /]
+-->
+<section class="db-contact"><h2 class="db-contact-heading">{{header}}</h2><p class="db-contact-blurb">{{blurb}}</p><address class="db-contact-details"><a class="db-contact-link" href="mailto:{{email}}">{{email}}</a><a class="db-contact-link" href="tel:{{phone}}">{{phone}}</a><p>{{address}}</p></address><p class="db-contact-hours">{{hours}}</p></section>

package/server/blocks/domma-block-contact.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "support"
+    ]
+}

package/server/blocks/domma-block-cta.css

@@ -0,0 +1,8 @@
+.db-cta {
+    margin-block: 1.5rem; padding: clamp(2rem, 5vw, 4rem) 1.5rem; border: 1px solid var(--dm-card-border, #d5e0e5); border-radius: var(--dm-radius-xl, 1rem); background: var(--dm-card-bg, #f4f8fa); color: var(--dm-text, #152832); text-align: center; }
+.db-cta-heading { margin: 0 auto 1rem; max-width: 48rem; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.2; color: inherit; overflow-wrap: anywhere; }
+.db-cta-blurb { margin: 0 auto; max-width: 42rem; font-size: 1.1rem; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
+.db-cta a.db-cta-link { display: inline-block; margin-top: 1.5rem; padding: .8rem 1.25rem; border: 2px solid currentColor; border-radius: var(--dm-radius, .5rem); color: inherit; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
+.db-cta a.db-cta-link:hover { text-decoration: underline; }
+.db-cta a.db-cta-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-cta a.db-cta-link[href=""], .db-cta a.db-cta-link:not([href]), .db-cta a.db-cta-link:empty { display: none; }

package/server/blocks/domma-block-cta.html

@@ -0,0 +1,17 @@
+<!--
+  domma-block-cta - A welcoming call to action using your site's theme colours.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb  - Short invitation, as plain text
+    link   - Button destination
+    label  - Button text
+
+  Example:
+    [domma-block-cta header="Have something in mind?" blurb="Tell us a little about your plans." link="/contact" label="Let us help" /]
+-->
+<section class="db-cta">
+  <h2 class="db-cta-heading">{{header}}</h2>
+  <p class="db-cta-blurb">{{blurb}}</p>
+  <a class="db-cta-link db-cta-btn" href="{{link}}">{{label}}</a>
+</section>

package/server/blocks/domma-block-cta.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "conversion"
+    ]
+}

package/server/blocks/domma-block-faq.css

@@ -0,0 +1,13 @@
+.db-faq {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+}
+.db-faq-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-faq-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-faq-blurb:empty { display: none; }
+.db-faq-list { display: grid; gap: .75rem; margin: 1.5rem 0 0; }
+.db-faq-item { border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5)); border-radius: var(--dm-radius, .5rem); background: var(--dm-card-bg, var(--dm-surface, #f5f8fa)); }
+.db-faq-item dt { padding: 1.25rem; font-weight: 600; line-height: 1.5; }
+.db-faq-item dd { margin: 0; padding: 0 1.25rem 1.25rem; line-height: 1.75; white-space: pre-line; }
+.db-faq-item:has(dt:empty) { display: none; }

package/server/blocks/domma-block-faq.html

@@ -0,0 +1,17 @@
+<!--
+  domma-block-faq - Up to three questions and answers, readable without JavaScript.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+    question1 - Question 1
+    answer1 - Answer 1, as plain text
+    question2 - Question 2
+    answer2 - Answer 2, as plain text
+    question3 - Question 3
+    answer3 - Answer 3, as plain text
+
+  Example:
+    [domma-block-faq header="A few common questions" question1="How do we get started?" answer1="Get in touch and tell us what you have in mind." question2="Can I ask a question first?" answer2="Of course. We are happy to help." /]
+-->
+<section class="db-faq"><h2 class="db-faq-heading">{{header}}</h2><p class="db-faq-blurb">{{blurb}}</p><dl class="db-faq-list"><div class="db-faq-item"><dt>{{question1}}</dt><dd>{{answer1}}</dd></div><div class="db-faq-item"><dt>{{question2}}</dt><dd>{{answer2}}</dd></div><div class="db-faq-item"><dt>{{question3}}</dt><dd>{{answer3}}</dd></div></dl></section>

package/server/blocks/domma-block-faq.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "support"
+    ]
+}

package/server/blocks/domma-block-features.css

@@ -0,0 +1,18 @@
+.db-features {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+}
+.db-features-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-features-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-features-blurb:empty { display: none; }
+.db-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
+.db-features-card {
+    padding: clamp(1.25rem, 3vw, 2rem);
+    border: 1px solid var(--dm-card-border, var(--dm-border, #d5e0e5));
+    border-radius: var(--dm-radius-xl, 1rem);
+    background: var(--dm-card-bg, var(--dm-surface, #f5f8fa));
+}
+.db-features-card h3 { margin: 0 0 .75rem; color: inherit; font-size: 1.25rem; }
+.db-features-card p { margin: 0; line-height: 1.7; white-space: pre-line; }
+.db-features-card:has(h3:empty) { display: none; }

package/server/blocks/domma-block-features.html

@@ -0,0 +1,19 @@
+<!--
+  domma-block-features - An introduction and up to three feature cards.
+
+  Parameters:
+    header - Section heading (h2)
+    blurb - Introduction, as plain text
+    title1 - Feature 1 heading
+    text1 - Feature 1 description
+    title2 - Feature 2 heading
+    text2 - Feature 2 description
+    title3 - Feature 3 heading
+    text3 - Feature 3 description
+
+  Example:
+    [domma-block-features header="How we help" blurb="Practical support for your business." title1="Plan" text1="Find the right direction." title2="Build" text2="Bring your ideas to life." title3="Grow" text3="Keep moving forward." /]
+-->
+<section class="db-features"><h2 class="db-features-heading">{{header}}</h2><p class="db-features-blurb">{{blurb}}</p><div class="db-features-grid"><article class="db-features-card"><h3>{{title1}}</h3><p>{{text1}}</p></article>
+<article class="db-features-card"><h3>{{title2}}</h3><p>{{text2}}</p></article>
+<article class="db-features-card"><h3>{{title3}}</h3><p>{{text3}}</p></article></div></section>

package/server/blocks/domma-block-features.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "services"
+    ]
+}

package/server/blocks/domma-block-hero.css

@@ -0,0 +1,15 @@
+.db-hero {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+    padding: clamp(2rem, 6vw, 5rem) 1.25rem; text-align: center;
+}
+.db-hero-heading { margin: 0 0 1rem; color: inherit; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.2; }
+.db-hero-blurb { margin: 0; line-height: 1.75; white-space: pre-line; }
+.db-hero-blurb:empty { display: none; }
+.db-hero-heading { max-width: 54rem; margin-inline: auto; font-size: clamp(2rem, 5vw, 4rem); }
+.db-hero-blurb { max-width: 42rem; margin-inline: auto; font-size: 1.15rem; }
+.db-hero a.db-hero-link { display: inline-block; max-width: 100%; box-sizing: border-box; margin-top: 1.5rem; padding: .8rem 1.25rem; border: 2px solid currentColor; border-radius: var(--dm-radius, .5rem); color: inherit; font-weight: 600; text-decoration: none; line-height: 1.4; }
+.db-hero a.db-hero-link:hover { text-decoration: underline; }
+.db-hero a.db-hero-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
+.db-hero a.db-hero-link[href=""], .db-hero a.db-hero-link:not([href]), .db-hero a.db-hero-link:empty { display: none; }

package/server/blocks/domma-block-hero.html

@@ -0,0 +1,13 @@
+<!--
+  domma-block-hero - A centred page introduction with an optional button.
+
+  Parameters:
+    header - Main page heading (h1; use once per page)
+    blurb - Short introduction, as plain text
+    link - Optional button destination
+    label - Optional button text
+
+  Example:
+    [domma-block-hero header="Welcome to your next chapter" blurb="Say what you do and who you help." link="/contact" label="Let us help" /]
+-->
+<section class="db-hero"><h1 class="db-hero-heading">{{header}}</h1><p class="db-hero-blurb">{{blurb}}</p><a class="db-hero-link db-hero-btn" href="{{link}}">{{label}}</a></section>

package/server/blocks/domma-block-hero.meta.json

@@ -0,0 +1,7 @@
+{
+    "bundled": true,
+    "adminTags": [
+        "domma-blocks",
+        "introductions"
+    ]
+}

package/server/blocks/domma-block-image.css

@@ -0,0 +1,8 @@
+.db-image {
+    margin-block: 1.5rem;
+    color: var(--dm-text, #152832);
+    overflow-wrap: anywhere;
+}
+.db-image img { display: block; width: 100%; height: auto; border-radius: var(--dm-radius-xl, 1rem); }
+.db-image figcaption { margin-top: .75rem; font-size: .95rem; line-height: 1.6; text-align: center; white-space: pre-line; }
+.db-image img[src=""], .db-image img:not([src]), .db-image figcaption:empty { display: none; }

package/server/blocks/domma-block-image.html

@@ -0,0 +1,12 @@
+<!--
+  domma-block-image - An uncropped image with an optional caption.
+
+  Parameters:
+    image - Image address from your Media library
+    alt - Image description; empty for a decorative image
+    caption - Optional image caption, as plain text
+
+  Example:
+    [domma-block-image image="/media/your-work.jpg" alt="Describe what visitors can see" caption="Add a little context to the image." /]
+-->
+<figure class="db-image"><img src="{{image}}" alt="{{alt}}" loading="lazy" decoding="async"><figcaption>{{caption}}</figcaption></figure>