feat: CTA Button compoent

astro.config.mjs

@@ -146,7 +146,7 @@ export default defineConfig({
         themes: ['github-dark-dimmed'],
         styleOverrides: {
           borderColor: 'transparent',
-          borderRadius: 'var(--border-radius)'
+          borderRadius: 'var(--radius)'
         },
         defaultProps: {
           wrap: true

cms/README.md

@@ -319,6 +319,117 @@ The parent selector (`blockquote`) retains Astro's scoped attribute, so styles o
 
 See `Blockquote.astro` for an example using Option B.
 
+### Content Preview
+
+Content authors can preview draft pages before publishing. The preview system uses server-side rendering (SSR) to fetch draft content directly from Strapi at runtime, bypassing the build-time MDX pipeline entirely.
+
+#### How it works
+
+1. A content author makes changes in the Strapi admin panel
+2. They click **Save / Draft**
+3. They click **Open preview** (the button is disabled until the draft is saved or the content is published)
+4. Strapi calls the `preview.handler` in `config/admin.ts`, which reads the document from the database and builds a preview URL based on the content type (e.g. `/page-preview?documentId=abc123`)
+5. The browser opens `{CLIENT_URL}/page-preview?documentId=abc123` on the Astro dev/SSR server
+6. The Astro preview route (`src/pages/page-preview.astro`, which has `prerender = false`) fetches the **draft** content from the Strapi API using the `documentId`
+7. The page is rendered at runtime using the `DynamicZone` component, which maps Strapi block types to Astro components
+8. The author can edit, save, and re-preview as many times as needed before publishing
+
+**Note:** Preview requires saving first because Strapi reads the document from its database to generate the preview URL. Unsaved changes only exist in the browser and are not available to the preview handler.
+
+This is intentionally separate from the published content flow. Published pages are statically generated from MDX files at build time and have no runtime dependency on Strapi.
+
+#### Setup
+
+**Strapi side** (`cms/.env`):
+
+```env
+CLIENT_URL=http://localhost:1103   # Must match the Astro dev server URL
+```
+
+The preview handler is configured in `cms/config/admin.ts`. To add preview support for a new content type, add a case to the `getPreviewPathname` switch statement.
+
+**Astro side** (`.env` in project root):
+
+```env
+STRAPI_URL=http://localhost:1337
+STRAPI_PREVIEW_TOKEN=<your-api-token>
+```
+
+The token must have read access to the content types you want to preview (including draft status). You can generate one in the Strapi admin under Settings > API Tokens.
+
+#### Adding preview for a new content type
+
+1. Add a case in `cms/config/admin.ts` `getPreviewPathname()` that returns the preview route path
+2. Create an SSR page in `src/pages/` (e.g. `my-type-preview.astro`) with `export const prerender = false`
+3. In that page, use `fetchStrapi()` with `status=draft` to fetch the draft content and render it
+
+#### Adding a new block to the page dynamic zone
+
+When you add a new block component to the page content dynamic zone, you **must** also add it to the populate params in `src/pages/page-preview.astro`. In Strapi v5, using `on` (component-specific population) for a dynamic zone acts as a filter — only block types listed in `on` clauses are returned in the API response. Unlisted types are silently excluded.
+
+For blocks with only scalar fields (richtext, string, enum):
+
+```js
+'populate[content][on][blocks.my-block][populate]': '*'
+```
+
+For blocks with nested components or relations:
+
+```js
+'populate[content][on][blocks.my-block][populate][myRelation][populate]': '*'
+```
+
+If you forget this step, the block will not appear in the preview even though it exists in Strapi.
+
+#### Component architecture: presentational vs block components
+
+Every Strapi dynamic zone block type needs a corresponding **block component** in `src/components/blocks/` so that the `DynamicZone` component can render it during preview. Whether you also need a separate **presentational component** depends on the data shape.
+
+**When a single component is enough:**
+
+If the Strapi API data can be used directly with minimal transformation, one component can serve both preview and published content. For example, `Paragraph.astro` accepts a `content` string and handles the markdown-to-HTML conversion internally — no separate block adapter needed.
+
+**When you need two components:**
+
+If the Strapi API returns a different shape than what the presentational component expects (nested objects, markdown fields that need conversion, etc.), you need a block adapter to bridge the gap. For example:
+
+- `src/components/ambassadors/Ambassador.astro` — **Presentational component**. Accepts simple, flat props (`name`, `description` as HTML string, `photo` as URL string) and renders the UI. Used by both the published site and preview. Has no knowledge of where the data comes from.
+
+- `src/components/blocks/AmbassadorBlock.astro` — **Block adapter for preview**. Used only by `DynamicZone` during SSR preview. Receives raw Strapi API data (nested `photo` object, markdown `description`) and transforms it into the simple props the presentational component expects (extracts `photo.url`, converts markdown to HTML via `marked`).
+
+For published content, the MDX lifecycle hook in Strapi handles these transformations at publish time, so the presentational component is used directly in the generated MDX. The block adapters are only needed for preview.
+
+**Rule of thumb:** If you need to transform Strapi's API response before rendering (flatten nested objects, convert markdown to HTML, resolve relations), create a block adapter in `src/components/blocks/` that does the transformation and delegates to a presentational component. Otherwise, a single component in `src/components/blocks/` is fine.
+
+#### Styling rendered HTML from `set:html`
+
+Components that render Strapi richtext fields use `set:html` to inject HTML converted from markdown. Since this injected HTML doesn't receive Astro's scoped data attributes, child elements can inherit unwanted styles from page-level prose selectors (e.g. `[&_strong]:text-primary`).
+
+There are two approaches to control styling of `set:html` content:
+
+**Option A — Tailwind arbitrary variants on container elements:**
+
+```html
+<blockquote
+  class="[&_strong]:text-inherit [&_p]:mb-0 [&_em]:italic"
+></blockquote>
+```
+
+Consistent with the pattern used in `[...page].astro` and `Paragraph.astro`. Keeps everything in the template but can get verbose with many overrides.
+
+**Option B — Astro scoped `<style>` with `:global()`:**
+
+```css
+<style>
+  blockquote :global(strong) { color: inherit; }
+  blockquote :global(p) { margin-bottom: 0; }
+</style>
+```
+
+The parent selector (`blockquote`) retains Astro's scoped attribute, so styles only apply within that component — they won't leak to other parts of the page. `:global()` removes scoping from the child selector so it can reach the injected HTML. Cleaner when there are multiple overrides.
+
+See `Blockquote.astro` for an example using Option B.
+
 ## Development Workflow
 
 1. **Start the CMS**:

cms/src/components/blocks/cta-button.json

@@ -0,0 +1,23 @@
+{
+  "collectionName": "components_blocks_cta_buttons",
+  "info": {
+    "displayName": "CTA Button",
+    "icon": "cursor",
+    "description": "Call-to-action button with link. Special tokens: <front> (home), <nolink> (text only), <button> (non-navigating button)"
+  },
+  "options": {},
+  "attributes": {
+    "text": {
+      "type": "string",
+      "required": true
+    },
+    "link": {
+      "type": "string",
+      "required": true,
+      "description": "Enter URL or special token: <front> for home page, <nolink> for text only, <button> for keyboard-accessible text"
+    },
+    "analytics_event_label": {
+      "type": "string"
+    }
+  }
+}

cms/src/serializers/blocks/cta-button.serializer.ts

@@ -0,0 +1,26 @@
+import jsesc from 'jsesc'
+
+const esc = (v: string) => (v ? jsesc(v, { quotes: 'double' }) : '')
+
+interface CtaButtonBlock {
+  __component: 'blocks.cta-button'
+  text: string
+  link: string
+  analytics_event_label?: string
+}
+
+export function serialize(block: CtaButtonBlock): string {
+  if (!block.text || !block.link) return ''
+
+  const attrs = [
+    `text="${esc(block.text)}"`,
+    `link="${esc(block.link)}"`,
+    block.analytics_event_label
+      ? `analytics_event_label="${esc(block.analytics_event_label)}"`
+      : null
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  return `<CtaButton ${attrs} />`
+}

cms/src/serializers/blocks/index.ts

@@ -13,6 +13,7 @@ import { serialize as ambassador } from './ambassador.serializer'
 import { serialize as ambassadorsGrid } from './ambassadors-grid.serializer'
 import { serialize as blockquote } from './blockquote.serializer'
 import { serialize as calloutText } from './callout-text.serializer'
+import { serialize as ctaButton } from './cta-button.serializer'
 
 const SERIALIZERS: Record<string, (block: unknown) => string> = {
   'blocks.cards-grid': cardsGrid,
@@ -24,7 +25,8 @@ const SERIALIZERS: Record<string, (block: unknown) => string> = {
   'blocks.ambassador': ambassador,
   'blocks.ambassadors-grid': ambassadorsGrid,
   'blocks.blockquote': blockquote,
-  'blocks.callout-text': calloutText
+  'blocks.callout-text': calloutText,
+  'blocks.cta-button': ctaButton
 }
 
 export function serializeContent(

cms/src/utils/pageLifecycle.ts

@@ -197,7 +197,8 @@ async function fetchPublished(
             },
             'blocks.ambassadors-grid': {
               populate: { ambassadors: true }
-            }
+            },
+            'blocks.cta-button': {}
           }
         }
       }

src/components/blocks/Carousel.astro

@@ -40,7 +40,7 @@ const carouselId = `carousel-${Math.random().toString(36).substr(2, 9)}`
       {
         items.map((item, index) => (
           <div
-            class="hidden animate-[fadeIn_500ms_ease-in-out] data-[active=true]:block"
+            class="hidden animate-fade-in data-[active=true]:block"
             data-index={index}
             data-carousel-slide
             data-active={index === 0 ? 'true' : 'false'}

src/components/blocks/CtaButtonBlock.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * CTA Button Block for Dynamic Zones (SSR Preview)
+ * Wrapper that passes Strapi data to the CtaButton presentation component
+ */
+
+import CtaButton from '../buttons/CtaButton.astro'
+
+interface Props {
+  text: string
+  link: string
+  analytics_event_label?: string
+}
+
+const { text, link, analytics_event_label } = Astro.props
+---
+
+<CtaButton
+  text={text}
+  link={link}
+  analyticsEventLabel={analytics_event_label}
+/>

src/components/blocks/DynamicZone.astro

@@ -12,6 +12,7 @@ import CardsGrid from './CardsGrid.astro'
 import CardLinksGrid from './CardLinksGrid.astro'
 import Carousel from './Carousel.astro'
 import CtaBanner from './CtaBanner.astro'
+import CtaButtonBlock from './CtaButtonBlock.astro'
 import AmbassadorBlock from './AmbassadorBlock.astro'
 import AmbassadorsGridBlock from './AmbassadorsGridBlock.astro'
 import BlockquoteBlock from './BlockquoteBlock.astro'
@@ -35,6 +36,7 @@ const componentMap: Record<string, any> = {
   'blocks.card-links-grid': CardLinksGrid,
   'blocks.carousel': Carousel,
   'blocks.cta-banner': CtaBanner,
+  'blocks.cta-button': CtaButtonBlock,
   'blocks.ambassador': AmbassadorBlock,
   'blocks.ambassadors-grid': AmbassadorsGridBlock,
   'blocks.blockquote': BlockquoteBlock,

src/components/blocks/Paragraph.astro

@@ -24,7 +24,12 @@ const alignmentClass =
       : ''
 ---
 
+{
+  /* :where(a) keeps specificity low so styled components (e.g. CtaButton)
+    can override these prose defaults with their own Tailwind classes */
+}
 <div
-  class={`mx-auto max-w-narrow ${alignmentClass} [&_p]:mb-space-s [&_p]:leading-relaxed [&_a]:text-primary [&_a]:underline [&_a:hover]:no-underline [&_h2]:mt-space-l [&_h2]:mb-space-s [&_h2]:text-[1.75rem] [&_h2]:font-semibold [&_h2]:text-primary [&_h3]:mt-space-m [&_h3]:mb-space-xs [&_h3]:text-[1.25rem] [&_h3]:font-semibold [&_ul]:mb-space-s [&_ul]:ps-space-m [&_ol]:mb-space-s [&_ol]:ps-space-m [&_li]:mb-space-xs`}
+  data-prose
+  class={`mx-auto max-w-narrow ${alignmentClass}`}
   set:html={htmlContent}
 />

src/components/buttons/CtaButton.astro

@@ -0,0 +1,121 @@
+---
+/**
+ * CTA Button Component
+ * Styled call-to-action button with optional arrow icon
+ *
+ * Special link tokens:
+ * - <front> → Links to home page (/)
+ * - <nolink> → Displays text without link
+ * - <button> → Keyboard-accessible button (no navigation)
+ */
+
+interface Props {
+  text: string
+  link: string
+  analyticsEventLabel?: string
+}
+
+const { text, link: rawLink, analyticsEventLabel } = Astro.props
+
+// Handle special link tokens
+let link = rawLink
+let isNoLink = false
+let isButton = false
+
+if (rawLink === '<front>') {
+  link = '/'
+} else if (rawLink === '<nolink>') {
+  isNoLink = true
+} else if (rawLink === '<button>') {
+  isButton = true
+}
+
+// Auto-detect external links
+const isExternal =
+  !isNoLink &&
+  !isButton &&
+  (link.startsWith('http://') ||
+    link.startsWith('https://') ||
+    link.startsWith('//'))
+
+const buttonClasses =
+  'inline-flex text-btn-txt items-center gap-space-2xs rounded-pill px-space-s py-space-xs text-step-0 font-medium no-underline bg-primary transition-all duration-fast focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary group hover:underline'
+
+// For <nolink>, use plain text styling (no button appearance)
+const noLinkClasses = 'text-step-0 font-medium'
+---
+
+{
+  /* Regular link */
+  !isNoLink && !isButton && (
+    <a
+      href={link}
+      class={buttonClasses}
+      data-umami-event={analyticsEventLabel ?? ''}
+      {...(isExternal && {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        'aria-label': `${text} (opens in new window)`
+      })}
+    >
+      {text}
+
+      {
+        /* Arrow icon - internal links only */
+        !isExternal && (
+          <svg
+            class="h-[0.6em] w-[0.6em] flex-none transition-transform duration-fast group-hover:translate-x-1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 12 12"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M11.92 5.62a1.001 1.001 0 0 0-.21-.33l-5-5a1.004 1.004 0 0 0-1.42 1.42L8.59 5H1a1 1 0 0 0 0 2h7.59l-3.3 3.29a1.002 1.002 0 0 0 .325 1.639 1 1 0 0 0 1.095-.219l5-5a1 1 0 0 0 .21-.33 1 1 0 0 0 0-.76Z" />
+          </svg>
+        )
+      }
+
+      {
+        /* External link icon */
+        isExternal && (
+          <svg
+            class="h-[0.6em] w-[0.6em] flex-none"
+            fill="none"
+            viewBox="0 0 18 18"
+            aria-hidden="true"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M7 3H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4M11 1h6m0 0v6m0-6L7 11"
+            />
+          </svg>
+        )
+      }
+    </a>
+  )
+}
+
+{
+  /* <button> token - real button element */
+  isButton && (
+    <button
+      type="button"
+      class={buttonClasses}
+      data-umami-event={analyticsEventLabel ?? ''}
+    >
+      {text}
+    </button>
+  )
+}
+
+{
+  /* <nolink> token - plain text, no interactive styling */
+  isNoLink && (
+    <span class={noLinkClasses} data-umami-event={analyticsEventLabel ?? ''}>
+      {text}
+    </span>
+  )
+}