acinguiux-preact-components 0.0.1

package/src/main/organisms/list-item.js

@@ -0,0 +1,48 @@
+import { Icon } from '../atoms/icon.js'
+import { Asset } from '../molecules/asset.js'
+import { PromoText } from '../molecules/promo-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function ListItem ({ _model, ...props }) {
+  // Title and either asset or icon are required.
+  const { title, asset, links } = _model
+  if (!title || !(asset.src || links[0]?.icon)) {
+    throw new ValidationError()
+  }
+
+  return h('div', {
+    ...props,
+    className: 'bg-bga text-txa rounded-2xl flex flex-row h-full',
+    children: [
+      h(AssetOrIcon, { _model }),
+      h(PromoText, {
+        _model: {
+          ..._model,
+          links: links.filter(l => l.name).map(l => ({ ...l, icon: null }))
+        },
+        _variant: 'full'
+      })
+    ]
+  })
+}
+
+function AssetOrIcon ({ _model }) {
+  const { links, asset } = _model
+  const hasAsset = asset.src
+  const icon = links[0]?.icon
+
+  if (hasAsset) {
+    return h('div', { className: 'w-1/3 grow-0 shrink-0 py-6 ps-6' },
+      h('div', { className: 'rounded-lg overflow-hidden' },
+        h(Asset, { _model, role: 'presentation' })
+      )
+    )
+  }
+
+  return h('div', { className: 'shrink-0 ps-6 py-6' },
+    h('div', { className: 'bg-bgb text-txb w-16 h-16 flex items-center justify-center rounded-full' },
+      h(Icon, icon)
+    )
+  )
+}

package/src/main/organisms/metadata.js

@@ -0,0 +1,11 @@
+import { Glossary } from '../molecules/glossary.js'
+import h from '../shared/h.js'
+import { isPublish } from '../shared/wcm-mode.js'
+
+export function Metadata (props) {
+  if (isPublish) {
+    return null
+  }
+
+  return h(Glossary, { ...props, _color: 'system-solid' })
+}

package/src/main/organisms/navigation.js

@@ -0,0 +1,232 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
+import { Link } from '../atoms/link.js'
+import { Logo } from '../atoms/logo.js'
+import { Menu } from '../atoms/menu.js'
+import { NavLink } from '../atoms/nav-link.js'
+import { Tree } from '../molecules/tree.js'
+import getId from '../shared/get-id.js'
+import h from '../shared/h.js'
+import { NAVIGATION_BURGER, NAVIGATION_CLOSE } from '../shared/icons.js'
+import markSelection from '../shared/mark-selection.js'
+import splitLinks from '../shared/split-links.js'
+import t from '../shared/t.js'
+
+//
+// Main navigation.
+//
+
+export function Navigation ({ _model, ...props }) {
+  const [homeLink, mainLinks, toolLinks] = useMemo(() => getLinks(_model), [_model])
+  markSelection(mainLinks)
+
+  return h('div', {
+    ...props,
+    className: 'w-full relative border-txa/20 border-b text-txa bg-bga',
+    children: h(NavigationMain, { title: _model.title, homeLink, mainLinks, toolLinks })
+  })
+}
+
+function NavigationMain ({ title, homeLink, mainLinks, toolLinks }) {
+  // Make sure only one link is expanded at once.
+  const [expandedIndex, setExpandedIndex] = useState()
+  const [getIndexedId] = useIndexedIds()
+  const { isBurgerEmpty, closeBurger, ...burgerProps } = useBurger(mainLinks)
+
+  // Temporary fix to force close the menu on route change if the instance is the same.
+  useEffect(() => {
+    const onRoute = () => {
+      setExpandedIndex(null)
+      closeBurger()
+    }
+    globalThis.addEventListener('route', onRoute)
+    return () => globalThis.removeEventListener('route', onRoute)
+  }, [])
+
+  // Close on escape.
+  const mainLinksWrapperProps = {
+    className: 'flex',
+    role: 'list',
+    onKeyUp: event => event.key === 'Escape' && setExpandedIndex(null)
+  }
+
+  return h('nav', { className: 'max-w-page m-auto' },
+
+    // Main links.
+    h('div', { className: 'flex items-center' },
+      // Logo.
+      h(Link, {
+        'aria-label': homeLink.value && homeLink.name,
+        _model: { value: homeLink.value },
+        children: h('div', { className: 'min-h-16 border-txa flex' },
+          h('div', { className: 'flex shrink-0 grow-0' },
+            h(Logo)
+          ),
+          title && h('div', { className: 'grow flex items-center tracking-tight font-bold max-w-52 pr-9 ' }, title)
+        )
+      }),
+
+      // Main links - close on escape.
+      mainLinks.length > 0 && h('div', mainLinksWrapperProps, mainLinks.map((link, index) => {
+        const isExpanded = expandedIndex === index
+        const hasMenu = Boolean(link.children)
+        const menuId = (hasMenu && getIndexedId(index)) || undefined
+
+        // Menu should be shown in the right variant when open,
+        // and when closed it is just an empty div (so that id exists).
+        let menu
+        if (isExpanded) {
+          menu = h(Menu, {
+            id: menuId,
+            children: h(Tree, {
+              _model: {
+                links: [{ name: t('Go to: {0}', link.name), value: link.value }, ...link.children ?? []]
+              }
+            })
+          })
+        } else {
+          // Empty div is necessary for the aria-controls reference.
+          menu = h('div', { id: menuId, className: 'hidden' })
+        }
+
+        return h('div', { className: 'shrink sm:hidden md:hidden tracking-tight relative', role: 'listitem' }, hasMenu
+          ? [
+              h(NavLink, {
+                _selection: 'bottom',
+                _size: 'lg',
+                _highlighted: isExpanded,
+                _expanded: false,
+                _model: { ...link },
+                role: 'button',
+                'aria-expanded': isExpanded,
+                'aria-controls': menuId,
+                ...getAriaCurrentPage(link),
+                onClick: event => {
+                  event.preventDefault()
+                  setExpandedIndex(expandedIndex === index ? null : index)
+                }
+              }),
+              // Show menu.
+              menu
+            ]
+          : h(NavLink, { _selection: 'bottom', _size: 'lg', _model: link, ...getAriaCurrentPage(link) })
+        )
+      })),
+
+      // Spacer.
+      h('div', { className: 'grow' }),
+
+      // Tool links.
+      toolLinks.length > 0 && h('div', { role: 'list', className: 'flex shrink' }, toolLinks.map(link =>
+        h('div', { role: 'listitem' },
+          h(NavLink, { _size: 'lg', _textless: true, _model: link })
+        )
+      )),
+
+      // Burger button (mobile and tablet).
+      !isBurgerEmpty && h('div', { className: 'lg:hidden' },
+        h(BurgerMenuButton, burgerProps)
+      )
+    ),
+
+    // Burger menu.
+    h(BurgerMenu, burgerProps)
+  )
+}
+
+// Helper indicating current page attribute.
+function getAriaCurrentPage (link) {
+  return link.selected && globalThis.location.href.includes(link.value) ? { 'aria-current': 'page' } : {}
+}
+
+//
+// Menu handling.
+//
+
+// Helper hook: index-based generated element ids.
+function useIndexedIds () {
+  const indexedIds = useRef([])
+  const getIndexedId = (index = 0) => {
+    if (!indexedIds.current[index]) {
+      indexedIds.current[index] = getId()
+    }
+    return indexedIds.current[index]
+  }
+
+  return [getIndexedId, indexedIds.current]
+}
+
+//
+// Burger menu.
+//
+
+function useBurger (mainLinks) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const ids = useRef({ ownerId: getId(), ownedId: getId() })
+  const isBurgerEmpty = useMemo(() => mainLinks.length === 0, [mainLinks])
+  const escapeHandler = event => {
+    if (event.key.startsWith('Esc')) {
+      setIsExpanded(false)
+      document.getElementById(ids.current.ownerId).focus()
+    }
+  }
+
+  return {
+    mainLinks,
+    isExpanded,
+    setIsExpanded,
+    ids,
+    isBurgerEmpty,
+    closeBurger: () => setIsExpanded(false),
+    escapeHandler
+  }
+}
+
+export function BurgerMenuButton ({ isExpanded, setIsExpanded, ids, escapeHandler }) {
+  return h(NavLink, {
+    onClick: event => {
+      setIsExpanded(!isExpanded)
+      event.preventDefault()
+    },
+    onKeyUp: escapeHandler,
+    id: ids.current.ownerId,
+    'aria-controls': ids.current.ownedId,
+    'aria-expanded': isExpanded.toString(),
+    'aria-haspopup': true,
+    _highlighted: isExpanded,
+    _model: { name: 'Menu', icon: isExpanded ? NAVIGATION_CLOSE : NAVIGATION_BURGER },
+    _textless: true,
+    _size: 'lg'
+  })
+}
+
+function BurgerMenu ({ mainLinks, isExpanded, ids, escapeHandler }) {
+  const menuProps = {
+    className: 'animate-expand bg-bga lg:hidden border-txa/20 border-t',
+    id: ids.current.ownedId,
+    'aria-labelledby': ids.current.ownerId,
+    onKeyUp: escapeHandler
+  }
+
+  return isExpanded && h('div', menuProps,
+    h(Tree, { _model: { links: mainLinks } })
+  )
+}
+
+//
+// Helpers.
+//
+
+function getLinks (_model) {
+  const { links } = _model
+  const nestedLinks = splitLinks(links)
+
+  // Ensure length.
+  while (nestedLinks.length < 4) {
+    nestedLinks.push([])
+  }
+
+  const [homeLinks, mainLinks, toolLinks] = nestedLinks
+  const homeLink = homeLinks.pop() || {}
+
+  return [homeLink, mainLinks, toolLinks]
+}

package/src/main/organisms/notification.js

@@ -0,0 +1,87 @@
+import { useLayoutEffect, useState } from 'preact/hooks'
+import { Button } from '../atoms/button.js'
+import { Heading } from '../atoms/heading.js'
+import { Popup } from '../atoms/popup.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Asset } from '../molecules/asset.js'
+import { Links } from '../molecules/links.js'
+import h from '../shared/h.js'
+import { NAVIGATION_CLOSE } from '../shared/icons.js'
+import t from '../shared/t.js'
+import usePersistentState from '../shared/use-persistent-state.js'
+
+const RETENTION = 8_640_000_000 // Expire after 100 days (the value is in milliseconds).
+const STORAGE_KEY = 'suppressed_notifications'
+
+export function Notification ({ _model, _variant, ...props }) {
+  const { title, text, asset } = _model
+  if (!title && !text) {
+    return null
+  }
+
+  const [notifications, setNotifications] = usePersistentState(STORAGE_KEY, {})
+  const [show, setShow] = useState(false)
+
+  useLayoutEffect(() => {
+    (async () => {
+      const currentHash = await getHash(text)
+      const updatedNotifications = { ...notifications }
+
+      // Clean up expired notifications.
+      for (const [hash, date] of Object.entries(notifications)) {
+        if (new Date(date).getTime() + RETENTION < Date.now()) {
+          delete updatedNotifications[hash]
+        }
+      }
+
+      if (!updatedNotifications[currentHash]) {
+        setShow(true)
+        updatedNotifications[currentHash] = new Date().toISOString()
+      }
+
+      setNotifications(() => updatedNotifications)
+    })().catch(console.error)
+  }, [text])
+
+  const _layout = _variant === 'center' ? 'center' : 'toast'
+  const _modal = _variant === 'center'
+
+  return h(Popup, { _show: show, _layout, _modal, 'aria-label': title, ...props },
+    h('div', { className: 'flex gap-2' },
+      h('div',
+        h(Button, {
+          _variant: 'plain',
+          _textless: true,
+          _size: 'xs',
+          _model: {
+            name: t('Dismiss'),
+            value: '#',
+            icon: NAVIGATION_CLOSE
+          },
+          onClick: event => {
+            event.preventDefault()
+            setShow(false)
+          }
+        })
+      ),
+      h('div', { className: 'grow order-first' },
+        h(Heading, { _level: '3' }, title)
+      )
+    ),
+    _layout === 'center' && asset.src && h('figure', { className: 'col-span-2 space-y-1' },
+      h('div', { className: 'rounded-lg overflow-hidden' },
+        h(Asset, { _model })
+      ),
+      asset.caption && h('figcaption', asset.caption)
+    ),
+    h(RichText, text),
+    h(Links, { _model })
+  )
+}
+
+async function getHash (str) {
+  // crypto.subtle is only available on HTTPS (or literal localhost).
+  const buf = await crypto?.subtle?.digest?.('SHA-256', new TextEncoder().encode(str))
+  const arr = Array.from(new Uint8Array(buf))
+  return arr.map(num => num.toString(16).padStart(2, '0')).join('')
+}

package/src/main/organisms/order-tracker.js

@@ -0,0 +1,203 @@
+import { Img } from '../atoms/img.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+const ORDER_STEPS = ['Placed', 'In progress', 'Packed', 'On the way', 'Delivered']
+
+export function OrderTracker ({ _model, ...props }) {
+  const {
+    orderNumber,
+    status,
+    steps = ORDER_STEPS,
+    estimatedTime,
+    address,
+    paymentMode,
+    paymentStatus,
+    items = [],
+    summary = {},
+    links
+  } = _model
+
+  if (!orderNumber) {
+    throw new ValidationError()
+  }
+
+  const currentStepIndex = steps.findIndex(step => step.toLowerCase() === (status || '').toLowerCase())
+  const activeStep = currentStepIndex >= 0 ? currentStepIndex : 0
+
+  return h('div', {
+    ...props,
+    className: 'bg-bga text-txa w-full space-y-4'
+  },
+
+  // Order header
+  h('div', { className: 'bg-bga border border-txa/10 rounded-lg p-3 lg:p-4' },
+    h('div', { className: 'flex flex-wrap items-center gap-2 lg:gap-4' },
+      h('span', { className: 'text-xs lg:text-sm text-txa/60' }, 'Order No:'),
+      h('span', { className: 'text-xs lg:text-sm font-bold' }, orderNumber),
+      h('span', { className: 'text-xs lg:text-sm text-txa/60 sm:ml-2 lg:ml-4' }, 'Status:'),
+      h('span', { className: 'inline-flex items-center rounded-sm bg-bgb/10 text-bgb px-2 py-0.5 text-xs lg:text-sm font-semibold' }, status || 'Unknown'),
+      h('div', { className: 'flex-1 flex justify-end' },
+        h('button', {
+          type: 'button',
+          className: 'clickable border border-txa/30 rounded-md px-3 lg:px-5 py-1.5 lg:py-2 text-xs lg:text-sm font-semibold hover:bg-txa hover:text-bga transition',
+          'aria-label': 'Track order'
+        }, 'Track Order')
+      )
+    ),
+
+    // Progress tracker
+    h('div', { className: 'flex items-start justify-between mt-4 lg:mt-6 px-1' },
+      steps.map((step, index) =>
+        h('div', { key: step, className: 'flex flex-col items-center flex-1 relative' },
+          // Connector line (before this step)
+          index > 0 && h('div', {
+            className: `absolute top-3 right-1/2 w-full h-px ${index <= activeStep ? 'border-t border-dashed border-bgb' : 'border-t border-solid border-txa/20'}`,
+            style: 'z-index: 0;'
+          }),
+          // Step circle
+          h('div', {
+            className: `relative z-10 flex items-center justify-center w-6 h-6 lg:w-7 lg:h-7 rounded-full ${index <= activeStep ? 'bg-bgb text-txb' : 'bg-txa/10 text-txa/40'}`
+          },
+          index <= activeStep
+            ? h('svg', { width: 14, height: 14, viewBox: '0 0 16 16', fill: 'none' },
+              h('path', {
+                'fill-rule': 'evenodd',
+                'clip-rule': 'evenodd',
+                d: 'M6.575 12a.667.667 0 01-.486-.21L2.847 8.337a.666.666 0 11.972-.912l2.75 2.927 5.605-6.135a.667.667 0 01.985.899l-6.092 6.667A.665.665 0 016.58 12h-.005z',
+                fill: 'currentColor'
+              })
+            )
+            : h('span', { className: 'text-[10px] lg:text-xs font-bold' }, index + 1)
+          ),
+          // Step label
+          h('span', { className: `mt-1 text-[9px] lg:text-xs text-center leading-tight ${index <= activeStep ? 'font-semibold text-txa' : 'text-txa/50'}` }, step)
+        )
+      )
+    )
+  ),
+
+  // Order details grid
+  h('div', { className: 'bg-bga border border-txa/10 rounded-lg p-3 lg:p-4 grid sm:grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6' },
+
+    // Delivery address
+    address && h('div', { className: 'flex flex-col gap-1 lg:border-r lg:border-txa/10 lg:pr-4' },
+      h('span', { className: 'text-[10px] lg:text-xs font-semibold text-txa/60 uppercase' }, 'Delivery Address'),
+      address.name && h('span', { className: 'text-xs lg:text-sm font-bold' }, address.name),
+      address.line && h('span', { className: 'text-[10px] lg:text-xs text-txa/70 leading-relaxed' }, address.line)
+    ),
+
+    // Delivery time & payment
+    h('div', { className: 'flex flex-col gap-2' },
+      estimatedTime && h('div', { className: 'flex flex-col gap-0.5' },
+        h('span', { className: 'text-[10px] lg:text-xs font-semibold text-txa/60 uppercase' }, 'Estimated Delivery'),
+        h('div', { className: 'flex items-center gap-1' },
+          h('svg', { width: 14, height: 14, viewBox: '0 0 18 18', fill: 'none' },
+            h('path', {
+              'fill-rule': 'evenodd',
+              'clip-rule': 'evenodd',
+              d: 'M12 8.25H9.75V6C9.75 5.586 9.414 5.25 9 5.25C8.586 5.25 8.25 5.586 8.25 6V9C8.25 9.414 8.586 9.75 9 9.75H12C12.414 9.75 12.75 9.414 12.75 9C12.75 8.586 12.414 8.25 12 8.25ZM9 15C5.692 15 3 12.308 3 9C3 5.692 5.692 3 9 3C12.308 3 15 5.692 15 9C15 12.308 12.308 15 9 15ZM9 1.5C4.864 1.5 1.5 4.864 1.5 9C1.5 13.136 4.864 16.5 9 16.5C13.136 16.5 16.5 13.136 16.5 9C16.5 4.864 13.136 1.5 9 1.5Z',
+              fill: 'currentColor',
+              opacity: '0.6'
+            })
+          ),
+          h('span', { className: 'text-xs lg:text-sm font-semibold' }, estimatedTime)
+        )
+      ),
+      paymentStatus && h('div', { className: 'flex flex-col gap-0.5' },
+        h('span', { className: 'text-[10px] lg:text-xs font-semibold text-txa/60 uppercase' }, 'Payment Status'),
+        h('span', { className: 'text-xs lg:text-sm font-bold' }, paymentStatus)
+      ),
+      paymentMode && h('div', { className: 'flex flex-col gap-0.5' },
+        h('span', { className: 'text-[10px] lg:text-xs font-semibold text-txa/60 uppercase' }, 'Payment Mode'),
+        h('span', { className: 'text-xs lg:text-sm' }, paymentMode)
+      )
+    ),
+
+    // Order summary
+    summary.total != null && h('div', { className: 'bg-txa/5 rounded-md p-3 space-y-2' },
+      h('span', { className: 'text-xs lg:text-sm font-bold block' }, 'Order Summary'),
+      summary.subtotal != null && renderSummaryRow('Subtotal', formatPrice(summary.subtotal, summary.currency)),
+      summary.delivery != null && renderSummaryRow('Delivery', summary.delivery === 0 ? 'FREE' : formatPrice(summary.delivery, summary.currency), summary.delivery === 0),
+      summary.handling != null && renderSummaryRow('Handling', formatPrice(summary.handling, summary.currency)),
+      h('div', { className: 'border-t border-dashed border-txa/20 my-1' }),
+      renderSummaryRow('Total', formatPrice(summary.total, summary.currency), false, true),
+      summary.savings > 0 && h('div', { className: 'bg-bgb/10 rounded-sm px-2 py-1 flex justify-between items-center' },
+        h('span', { className: 'text-[10px] lg:text-xs font-semibold text-bgb' }, 'Total Savings'),
+        h('span', { className: 'text-[10px] lg:text-xs font-bold text-bgb' }, formatPrice(summary.savings, summary.currency))
+      )
+    )
+  ),
+
+  // Action buttons
+  h('div', { className: 'flex gap-2' },
+    links?.find(l => l.name === 'Pay now') && h('button', {
+      type: 'button',
+      className: 'clickable bg-bgb text-txb px-3 lg:px-4 py-1.5 lg:py-2 rounded-md text-xs lg:text-sm font-semibold',
+      'aria-label': 'Pay now'
+    }, 'Pay now'),
+    links?.find(l => l.name === 'Cancel Order') && h('button', {
+      type: 'button',
+      className: 'clickable border border-txa/30 px-3 lg:px-4 py-1.5 lg:py-2 rounded-md text-xs lg:text-sm font-semibold hover:bg-txa hover:text-bga transition',
+      'aria-label': 'Cancel order'
+    }, 'Cancel Order')
+  ),
+
+  // Items list
+  items.length > 0 && h('div', { className: 'bg-bga border border-txa/10 rounded-lg p-3 lg:p-4' },
+    h('div', { className: 'flex justify-between items-center pb-3 border-b border-txa/10' },
+      h('span', { className: 'text-sm lg:text-base font-bold' }, `Items purchased (${items.length})`),
+      links?.find(l => l.name === 'Shop from order') && h('button', {
+        type: 'button',
+        className: 'clickable bg-bgb text-txb px-3 lg:px-4 py-1.5 lg:py-2 rounded-md text-xs lg:text-sm font-semibold',
+        'aria-label': 'Shop from this order'
+      }, 'Shop from this Order')
+    ),
+    h('ul', { className: 'divide-y divide-txa/10' },
+      items.map((item, index) =>
+        h('li', { key: index, className: 'flex items-center gap-3 lg:gap-4 py-3' },
+          // Item image
+          h('div', { className: 'shrink-0 w-14 h-14 lg:w-20 lg:h-20 rounded-md overflow-hidden bg-txa/5' },
+            item.image?.src
+              ? h(Img, {
+                _model: item.image,
+                _fit: 'contain',
+                className: 'w-full h-full object-contain'
+              })
+              : h('div', { className: 'w-full h-full bg-txa/5' })
+          ),
+          // Item info
+          h('div', { className: 'flex-1 min-w-0' },
+            h('span', { className: 'block text-xs lg:text-sm font-medium truncate' }, item.title)
+          ),
+          // Price & qty
+          h('div', { className: 'flex flex-col items-end shrink-0' },
+            h('div', { className: 'flex items-center gap-1 text-xs lg:text-sm' },
+              h('span', { className: 'font-semibold' }, formatPrice(item.price, summary.currency)),
+              h('span', { className: 'text-txa/40' }, '|'),
+              h('span', null, `Qty: ${item.quantity || 1}`)
+            ),
+            item.savings > 0 && h('span', { className: 'text-[10px] lg:text-xs text-bgb font-semibold mt-0.5' }, `Saved: ${formatPrice(item.savings, summary.currency)}`)
+          )
+        )
+      )
+    )
+  )
+  )
+}
+
+function renderSummaryRow (label, value, isFree = false, isBold = false) {
+  return h('div', { className: 'flex justify-between items-center' },
+    h('span', { className: `text-[10px] lg:text-xs ${isBold ? 'font-bold' : 'text-txa/70'}` }, label),
+    h('span', { className: `text-[10px] lg:text-xs ${isBold ? 'font-bold' : ''} ${isFree ? 'text-bgb font-semibold' : ''}` }, value)
+  )
+}
+
+function formatPrice (value, currency = '\u20b9') {
+  if (typeof value === 'number') {
+    return `${currency}${value % 1 === 0 ? value : value.toFixed(1)}`
+  }
+
+  if (typeof value === 'string') return value
+  return `${currency}0`
+}

package/src/main/organisms/page-header-banner.js

@@ -0,0 +1,26 @@
+import { Asset } from '../molecules/asset.js'
+import { PromoText } from '../molecules/promo-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import disableTransparency from '../shared/disable-transparency.js'
+import h from '../shared/h.js'
+
+export function PageHeaderBanner ({ _model, ...props }) {
+  const { title, asset, image, video } = _model
+  if (!title || !asset.src) {
+    throw new ValidationError()
+  }
+
+  return h('div', { ...props, className: `relative h-full overflow-hidden lg:grid lg:grid-cols-12 bg-bga text-txa gap-x-5 rounded-2xl ${disableTransparency(props._color)}` },
+    h('div', { className: 'row-start-1 col-start-1 col-span-12 lg:h-full' },
+      h(Asset, {
+        _model: { video, image: { ...image, caption: null } },
+        _tall: true
+      })
+    ),
+    h('div', { className: 'row-start-1 col-start-2 col-span-5 flex items-center lg:overflow-hidden' },
+      h('div', { className: 'rounded-xl bg-bga text-txa relative' },
+        h(PromoText, { _model: { ..._model, date: null }, _level: 1 })
+      )
+    )
+  )
+}

package/src/main/organisms/page-header.js

@@ -0,0 +1,33 @@
+import { Box } from '../atoms/box.js'
+import { Heading } from '../atoms/heading.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Time } from '../atoms/time.js'
+import { Asset } from '../molecules/asset.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function PageHeader ({ _model, _variant, ...props }) {
+  const { asset, image, title, text, date } = _model
+  if (!title) {
+    throw new ValidationError()
+  }
+
+  const hasAsset = asset.src
+
+  return h('div', { ...props, className: 'relative lg:grid lg:grid-cols-12 lg:gap-x-5 w-full md:rounded-2xl sm:rounded-2xl overflow-hidden' },
+    hasAsset && h('div', { className: 'lg:col-span-12 overflow-hidden lg:rounded-2xl', style: 'aspect-ratio: 4 / 1' },
+      h(Asset, {
+        _model: { ..._model, image: { ...image, caption: null } },
+        _tall: true,
+      })
+    ),
+    // The z-0 is required for the text to appear on top of a <video>.
+    h(Box, { className: `bg-bga text-txa z-0 lg:rounded-tr-2xl lg:rounded-bl-2xl lg:rounded-br-2xl lg:col-start-1 lg:col-span-8 ${hasAsset ? 'lg:-mt-16' : 'lg:rounded-tl-2xl'}` },
+      h(Heading, { _level: 1 }, title),
+      date && _variant === 'date' && h(Time, { _time: date }),
+      text && h('div', { className: 'text-2xl' },
+        h(RichText, text)
+      )
+    )
+  )
+}

package/src/main/organisms/page-tags.js

@@ -0,0 +1,14 @@
+import { Box } from '../atoms/box.js'
+import { Tags } from '../molecules/tags.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function PageTags ({ _model, ...props }) {
+  if (_model.tags.length < 1) {
+    throw new ValidationError()
+  }
+
+  return h(Box, { ...props, className: 'rounded-2xl bg-bga text-txa' },
+    h(Tags, { _model })
+  )
+}