acinguiux-preact-components 0.0.1

package/src/main/organisms/page.js

@@ -0,0 +1,260 @@
+import { useEffect, useState } from 'preact/hooks'
+import { Icon } from '../atoms/icon.js'
+import { track } from '../shared/analytics.js'
+import h from '../shared/h.js'
+import { ARROW_TAIL_UP } from '../shared/icons.js'
+import t from '../shared/t.js'
+import updateHead from '../shared/update-head.js'
+import { tw } from '../shared/twind.js'
+
+const SCROLL_THRESHOLD = 200 // In pixels.
+const DEBOUNCE = 100 // In milliseconds.
+const SHARED_FAVICON_THEME = 'theme-base2'
+const UNIQUE_FAVICON_THEMES = new Set(['theme-nam-2025', 'theme-vegetable', 'theme-aurvana'])
+
+function getFaviconBasePath (themePath) {
+  const themeName = themePath?.split('/').pop()
+  if (!themeName) {
+    return undefined
+  }
+
+  if (UNIQUE_FAVICON_THEMES.has(themeName)) {
+    return `${themePath}/resources/favicon/`
+  }
+
+  return `/themes/${SHARED_FAVICON_THEME}/resources/favicon/`
+}
+
+// -----------------------------------------------------------------------------
+// Page component
+// -----------------------------------------------------------------------------
+
+export function Page ({ _model, children, ...props }) {
+  const { links } = _model
+  const getMeta = name => links.find(l => l.name === name)?.value ?? undefined
+  const aaUrl = getMeta('adobeAnalyticsUrl')
+  updateMetas(_model)
+
+  // Track after render.
+  useEffect(() => track(aaUrl), [aaUrl])
+
+  // Render the page in a div. This makes scrollbar handling inside overlays much simpler.
+  // The relative positioning is necessary, since the window does not scroll. The body does.
+  // This makes absolutely positioned elements work correctly.
+  return h('div', {
+    ...props,
+    className: 'font-sans text-base bg-bga min-h-dvh text-txa relative',
+    children: [
+      h(SkipToMain),
+      ...children,
+      h(BackToTop)
+    ]
+  })
+}
+
+function SkipToMain () {
+  return h('a', {
+    href: '#main',
+    _variant: 'bold',
+    'data-name': 'SkipToMain',
+    // Use z-20 for floating elements.
+    className: 'p-4 font-bold transition-all rounded-lg fixed start-6 bg-bgb text-txb -top-14 opacity-0 focus:top-6 focus:opacity-100 z-20 print:hidden',
+    children: t('Skip to main content')
+  })
+}
+
+function shouldBeVisible () {
+  return document.body.scrollTop >= SCROLL_THRESHOLD
+}
+
+function BackToTop () {
+  const [isVisible, setVisibility] = useState(shouldBeVisible())
+
+  useEffect(() => {
+    let resizeTimeout
+    document.addEventListener('scroll', () => {
+      clearTimeout(resizeTimeout)
+      resizeTimeout = setTimeout(() => {
+        setVisibility(shouldBeVisible())
+      }, DEBOUNCE)
+    }, true)
+  })
+
+  const name = t('Back to top')
+  return isVisible && h('button', {
+    // Use z-20 for floating elements.
+    className: 'clickable fixed bottom-6 end-6 shadow bg-bga text-txa animate-expand rounded-lg w-10 h-10 hover:text-bga hover:bg-txa transition-all flex justify-center items-center z-20 print:hidden',
+    title: name,
+    'aria-label': name,
+    'data-name': 'BackToTop',
+    onClick () {
+      document.body.scrollTop = 0
+      location.hash = '#'
+    },
+    children: h(Icon, ARROW_TAIL_UP)
+  })
+}
+
+// -----------------------------------------------------------------------------
+// Page metadata management
+// -----------------------------------------------------------------------------
+
+// SEO complains for relative URL's
+function getAbsoluteURL (value) {
+  return new URL(value, location.href)?.href
+}
+
+// Metadata handlers.
+const handlers = {
+  alternate ({ children }) {
+    // Remove all alternate links.
+    for (const el of document.querySelectorAll('link[rel="alternate"]')) { el.remove() }
+
+    for (const { name, value } of (children || [])) {
+      updateHead('link', { rel: 'alternate', hreflang: name }, { href: getAbsoluteURL(value), hreflang: name })
+    }
+  },
+
+  canonical ({ value }) {
+    const canonicalUrl = value && getAbsoluteURL(value)
+    updateHead('link', { rel: 'canonical' }, { href: canonicalUrl })
+    updateHead('meta', { property: 'og:url' }, { content: canonicalUrl })
+  },
+
+  externalDisclaimerText ({ value }) {
+    updateHead('meta', { name: 'external-disclaimer-text' }, { content: value })
+  },
+
+  dateModified ({ value }) {
+    updateHead('meta', { itemprop: 'dateModified' }, { content: value })
+  },
+
+  errorUrl ({ value }) {
+    updateHead('meta', { name: 'error-url' }, { content: value })
+  },
+
+  keywords ({ value }) {
+    updateHead('meta', { name: 'keywords' }, { content: value })
+  },
+
+  'og:type' ({ value }) {
+    updateHead('meta', { property: 'og:type' }, { content: value })
+  },
+
+  'twitter:card' ({ value }) {
+    updateHead('meta', { name: 'twitter:card' }, { content: value })
+  },
+
+  schema ({ value }) {
+    updateHeadJsonLd('local-business', value)
+  },
+
+  homeTitle ({ value }) {
+    updateHead('meta', { name: 'application-name' }, { content: value })
+    updateHead('meta', { name: 'apple-mobile-web-app-title' }, { content: value })
+  },
+
+  homeUrl ({ value }) {
+    updateHead('meta', { name: 'home-url' }, { content: value })
+  },
+
+  locale ({ value }) {
+    updateHead('meta', { property: 'og:locale' }, { content: value })
+    // The locale meta uses Java locale format for the sake of og:locale.
+    // The lang uses IETF BCP 47 and needs to be converted.
+    document.documentElement.lang = value?.replace('_', '-')
+  },
+
+  textDirection ({ value }) {
+    document.documentElement.dir = value
+  },
+
+  title ({ value }) {
+    document.title = value
+  },
+
+  themeCss ({ value }) {
+    updateHead('link', { rel: 'stylesheet', 'data-id': 'theme' }, { href: value })
+  },
+
+  themeMode ({ value }) {
+    if (value === 'bw') {
+      tw('grayscale')
+      document.documentElement.classList.add('grayscale')
+    } else {
+      document.documentElement.classList.remove('grayscale')
+    }
+  },
+
+  themePath ({ value }) {
+    let appleTouchIcon, manifest, faviconIco, faviconSvg
+
+    if (value) {
+      const path = getFaviconBasePath(value)
+      appleTouchIcon = `${path}apple-touch-icon.png`
+      manifest = `${path}manifest.json`
+      faviconIco = `${path}favicon.ico`
+      faviconSvg = `${path}favicon.svg`
+    }
+
+    updateHead('link', { rel: 'apple-touch-icon' }, { href: appleTouchIcon })
+    updateHead('link', { rel: 'manifest' }, { href: manifest })
+
+    // Remove all icons without data format.
+    for (const el of document.querySelectorAll('link[rel=icon]:not([data-format])')) { el.remove() }
+
+    // Create new icons with data format. From that point onwards only the href will be updated.
+    updateHead('link', { rel: 'icon', 'data-format': 'ico' }, { href: faviconIco })
+    updateHead('link', { rel: 'icon', 'data-format': 'svg' }, { href: faviconSvg })
+  }
+}
+
+function updateHeadJsonLd (id, value) {
+  const selector = `script[type="application/ld+json"][data-schema="${id}"]`
+  const existing = document.head.querySelector(selector)
+
+  if (!value) {
+    existing?.remove()
+    return
+  }
+
+  const el = existing ?? document.createElement('script')
+  el.type = 'application/ld+json'
+  el.setAttribute('data-schema', id)
+  el.textContent = value
+
+  if (!existing) {
+    document.head.appendChild(el)
+  }
+}
+
+function updateMetas (model) {
+  // Set the title.
+  if (model.title) {
+    handlers.title(model.title)
+  }
+
+  // Create a copy of handler references to track which ones were used.
+  const unusedHandlers = { ...handlers }
+  for (const link of model.links) {
+    // Inject new dynamic elements.
+    if (handlers[link.name]) {
+      delete unusedHandlers[link.name]
+      handlers[link.name](link, model)
+    }
+  }
+
+  // Remove elements that are not present in the model.
+  for (const handler of Object.values(unusedHandlers)) {
+    handler({})
+  }
+
+  updateHead('meta', { property: 'og:title' }, { content: document.title })
+  updateHead('meta', { itemprop: 'name' }, { content: document.title })
+  updateHead('meta', { name: 'description' }, { content: model.text })
+  updateHead('meta', { property: 'og:description' }, { content: model.text })
+  updateHead('meta', { itemprop: 'description' }, { content: model.text })
+  updateHead('meta', { property: 'og:image' }, { content: model.image.src })
+  updateHead('meta', { property: 'og:image:alt' }, { content: model.image.alt })
+  updateHead('meta', { name: 'twitter:image:alt' }, { content: model.image.alt })
+}

package/src/main/organisms/press-release.js

@@ -0,0 +1,24 @@
+import { Box } from '../atoms/box.js'
+import { Heading } from '../atoms/heading.js'
+import { Link } from '../atoms/link.js'
+import { RichText } from '../atoms/rich-text.js'
+import { Time } from '../atoms/time.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function PressRelease ({ _model, _variant, ...props }) {
+  const { links, date, title, text } = _model
+  if (!title || links.length === 0) {
+    throw new ValidationError()
+  }
+
+  const firstLink = links[0]
+
+  return h(Box, { ...props, className: 'bg-bga text-txa rounded-2xl h-full' },
+    h(Heading, { _level: 3 },
+      h(Link, { _model: { value: firstLink.value, name: title, icon: null }, _variant: 'full' })
+    ),
+    date && h(Time, { _time: date }),
+    _variant !== 'short' && h(RichText, text)
+  )
+}

package/src/main/organisms/product-admin.js

@@ -0,0 +1,204 @@
+import { useState } from 'preact/hooks'
+import { Img } from '../atoms/img.js'
+import h from '../shared/h.js'
+
+export function ProductAdmin ({ _model, ...props }) {
+  const { products = [], currency = '\u20b9', categories = [] } = _model || {}
+
+  const [rows, setRows] = useState(() =>
+    products.map((p, idx) => ({
+      id: p.id || idx,
+      image: p.image?.src || '',
+      title: p.title || '',
+      brand: p.brand || '',
+      category: p.category || '',
+      price: p.price != null ? String(p.price) : '',
+      oldPrice: p.oldPrice != null ? String(p.oldPrice) : '',
+      unitLabel: p.unitLabel || '',
+      description: p.description || '',
+      changed: false
+    }))
+  )
+
+  const updateRow = (idx, field, value) => {
+    setRows(prev => prev.map((row, i) =>
+      i === idx ? { ...row, [field]: value, changed: true } : row
+    ))
+  }
+
+  const changedCount = rows.filter(r => r.changed).length
+
+  const inputClass = 'w-full rounded border border-txa/20 bg-bga text-txa px-1.5 py-1 text-xs lg:text-sm focus:border-bgb focus:outline-none'
+  const selectClass = 'w-full rounded border border-txa/20 bg-bga text-txa px-1 py-1 text-xs lg:text-sm'
+  const thClass = 'px-2 py-2 text-[10px] lg:text-xs font-bold text-txa/70 uppercase text-left whitespace-nowrap'
+  const tdClass = 'px-1.5 py-1.5 align-middle'
+
+  return h('div', {
+    ...props,
+    className: 'bg-bga text-txa border border-txa/10 rounded-xl w-full overflow-hidden'
+  },
+
+  // Header
+  h('div', { className: 'flex items-center justify-between p-3 lg:p-4 border-b border-txa/10' },
+    h('h2', { className: 'text-sm lg:text-base font-bold' }, 'Product Admin'),
+    h('span', { className: 'text-xs text-txa/60' }, `${rows.length} products`)
+  ),
+
+  // Table
+  h('div', { className: 'overflow-x-auto' },
+    h('table', { className: 'w-full text-left border-collapse min-w-[800px]' },
+      h('thead', null,
+        h('tr', { className: 'bg-txa/5 border-b border-txa/10' },
+          h('th', { className: `${thClass} w-12` }, ''),
+          h('th', { className: thClass }, 'Name'),
+          h('th', { className: thClass }, 'Brand'),
+          h('th', { className: `${thClass} w-28` }, 'Category'),
+          h('th', { className: `${thClass} w-20` }, `Price (${currency})`),
+          h('th', { className: `${thClass} w-20` }, 'Old Price'),
+          h('th', { className: `${thClass} w-24` }, 'Unit'),
+          h('th', { className: thClass }, 'Description'),
+          h('th', { className: `${thClass} w-10` }, 'Image')
+        )
+      ),
+      h('tbody', null,
+        rows.map((row, idx) =>
+          h('tr', {
+            key: row.id,
+            className: `border-b border-txa/5 ${row.changed ? 'bg-bgb/5' : ''}`
+          },
+            // Thumbnail
+            h('td', { className: tdClass },
+              row.image
+                ? h('div', { className: 'w-9 h-9 lg:w-10 lg:h-10 rounded border border-txa/10 overflow-hidden' },
+                  h(Img, {
+                    _model: { src: row.image, alt: row.title, width: 40, height: 40 },
+                    _fit: 'contain',
+                    className: 'w-full h-full object-contain'
+                  })
+                )
+                : h('div', { className: 'w-9 h-9 lg:w-10 lg:h-10 rounded bg-txa/5' })
+            ),
+            // Name
+            h('td', { className: tdClass },
+              h('input', {
+                type: 'text',
+                value: row.title,
+                onInput: e => updateRow(idx, 'title', e.currentTarget.value),
+                className: inputClass,
+                placeholder: 'Product name'
+              })
+            ),
+            // Brand
+            h('td', { className: tdClass },
+              h('input', {
+                type: 'text',
+                value: row.brand,
+                onInput: e => updateRow(idx, 'brand', e.currentTarget.value),
+                className: inputClass,
+                placeholder: 'Brand'
+              })
+            ),
+            // Category (dropdown)
+            h('td', { className: tdClass },
+              categories.length > 0
+                ? h('select', {
+                  value: row.category,
+                  onChange: e => updateRow(idx, 'category', e.currentTarget.value),
+                  className: selectClass
+                },
+                h('option', { value: '' }, '\u2014'),
+                categories.map(cat => h('option', { key: cat, value: cat }, cat))
+                )
+                : h('input', {
+                  type: 'text',
+                  value: row.category,
+                  onInput: e => updateRow(idx, 'category', e.currentTarget.value),
+                  className: inputClass,
+                  placeholder: 'Category'
+                })
+            ),
+            // Price
+            h('td', { className: tdClass },
+              h('input', {
+                type: 'text',
+                value: row.price,
+                onInput: e => updateRow(idx, 'price', e.currentTarget.value),
+                className: `${inputClass} text-right`,
+                placeholder: '0'
+              })
+            ),
+            // Old Price
+            h('td', { className: tdClass },
+              h('input', {
+                type: 'text',
+                value: row.oldPrice,
+                onInput: e => updateRow(idx, 'oldPrice', e.currentTarget.value),
+                className: `${inputClass} text-right`,
+                placeholder: '\u2014'
+              })
+            ),
+            // Unit label (dropdown)
+            h('td', { className: tdClass },
+              h('select', {
+                value: row.unitLabel,
+                onChange: e => updateRow(idx, 'unitLabel', e.currentTarget.value),
+                className: selectClass
+              },
+              h('option', { value: '' }, '\u2014'),
+              h('option', { value: 'per 100 gm' }, 'per 100 gm'),
+              h('option', { value: 'per 250 gm' }, 'per 250 gm'),
+              h('option', { value: 'per 500 gm' }, 'per 500 gm'),
+              h('option', { value: 'per 1 kg' }, 'per 1 kg'),
+              h('option', { value: 'per piece' }, 'per piece')
+              )
+            ),
+            // Description
+            h('td', { className: tdClass },
+              h('input', {
+                type: 'text',
+                value: row.description,
+                onInput: e => updateRow(idx, 'description', e.currentTarget.value),
+                className: inputClass,
+                placeholder: 'Short description'
+              })
+            ),
+            // Image URL
+            h('td', { className: tdClass },
+              h('input', {
+                type: 'text',
+                value: row.image,
+                onInput: e => updateRow(idx, 'image', e.currentTarget.value),
+                className: `${inputClass} w-16 lg:w-20 truncate`,
+                placeholder: 'URL',
+                title: row.image
+              })
+            )
+          )
+        )
+      )
+    )
+  ),
+
+  // Footer with bulk save
+  h('div', { className: 'flex items-center justify-between p-3 lg:p-4 border-t border-txa/10 bg-txa/3' },
+    h('span', { className: 'text-xs text-txa/60' },
+      changedCount > 0 ? `${changedCount} product${changedCount > 1 ? 's' : ''} modified` : 'No changes'
+    ),
+    h('div', { className: 'flex gap-2' },
+      h('button', {
+        type: 'button',
+        className: 'clickable border border-txa/30 px-3 py-1.5 rounded-md text-xs lg:text-sm font-semibold hover:bg-txa hover:text-bga transition',
+        'aria-label': 'Discard changes',
+        disabled: changedCount === 0
+      }, 'Discard'),
+      h('button', {
+        type: 'button',
+        className: `clickable px-3 lg:px-4 py-1.5 lg:py-2 rounded-md text-xs lg:text-sm font-bold transition ${changedCount > 0 ? 'bg-bgb text-txb hover:bg-txb hover:text-bgb' : 'bg-txa/10 text-txa/40 cursor-not-allowed'}`,
+        'aria-label': 'Save all products',
+        disabled: changedCount === 0,
+        'data-products': JSON.stringify(rows.filter(r => r.changed))
+      }, `Save All${changedCount > 0 ? ` (${changedCount})` : ''}`)
+    )
+  )
+  )
+}

package/src/main/organisms/promo-banner.js

@@ -0,0 +1,28 @@
+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'
+
+const RIGHT_COL = 8
+const LEFT_COL = 2
+
+export function PromoBanner ({ _model, _variant, _color, ...props }) {
+  const { text, title, asset } = _model
+  if (!title || !text || !asset.src) {
+    throw new ValidationError()
+  }
+
+  const isRight = _variant === 'right'
+
+  return h('div', { ...props, className: `relative h-full rounded-2xl overflow-hidden lg:grid lg:grid-cols-12 gap-x-5 bg-bga text-txa ${disableTransparency(_color)}` },
+    h('div', { className: 'row-start-1 col-start-1 col-span-12 lg:h-full' },
+      h(Asset, { _model, _tall: true })
+    ),
+    h('div', { className: `row-start-1 col-start-${isRight ? RIGHT_COL : LEFT_COL} col-span-4 flex items-center` },
+      h('div', { className: 'lg:rounded-xl lg:overflow-hidden w-full relative bg-bga text-txa' },
+        h(PromoText, { _model })
+      )
+    )
+  )
+}

package/src/main/organisms/promo-bottom.js

@@ -0,0 +1,23 @@
+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 PromoBottom ({ _model, ...props }) {
+  const { title, text, asset } = _model
+  if (!title || !text || !asset.src) {
+    throw new ValidationError()
+  }
+
+  return h('div', { ...props, className: `relative h-full rounded-2xl overflow-hidden lg:grid lg:grid-cols-2 bg-bga text-txa ${disableTransparency(props._color)}` },
+    h('div', { className: 'row-start-1 col-start-1 col-span-2 lg:h-full' },
+      h(Asset, { _model, _tall: true })
+    ),
+    h('div', { className: 'row-start-1 col-start-1 col-span-1 lg:p-6 flex items-end' },
+      h('div', { className: 'lg:rounded-xl lg:overflow-hidden w-full relative bg-bga text-txa' },
+        h(PromoText, { _model })
+      )
+    )
+  )
+}

package/src/main/organisms/promo-button.js

@@ -0,0 +1,8 @@
+import { PromoText } from '../molecules/promo-text.js'
+import h from '../shared/h.js'
+
+export function PromoButton ({ _model, ...props }) {
+  return h('div', { ...props, className: 'bg-bga text-txa rounded-2xl overflow-hidden' },
+    h(PromoText, { _model })
+  )
+}

package/src/main/organisms/promo-card-cover.js

@@ -0,0 +1,35 @@
+import { Box } from '../atoms/box.js'
+import { Card } from '../atoms/card.js'
+import { Heading } from '../atoms/heading.js'
+import { LinkText } from '../atoms/link-text.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'
+import idFromString from '../shared/id-from-string.js'
+
+export function PromoCardCover ({ _model, ...props }) {
+  const { image, title, links, text, date } = _model
+  if (!title || links.length === 0) {
+    throw new ValidationError()
+  }
+
+  return h(Card, {
+    ...props,
+    _model: { value: links[0].value },
+    children: h('div',
+      { className: 'flex flex-col h-full' },
+      Boolean(image?.src) && h('div', { className: 'h-28 overflow-hidden' },
+        h(Asset, { _model, _tall: true, _fit: 'cover' })
+      ),
+      h(Box,
+        h(Heading, { _level: 3, id: idFromString(title) },
+          h(LinkText, { _model: { name: title, value: links[0].value } })
+        ),
+        date && h(Time, { _time: date }),
+        text && h(RichText, text)
+      )
+    )
+  })
+}

package/src/main/organisms/promo-card.js

@@ -0,0 +1,33 @@
+import { Box } from '../atoms/box.js'
+import { Card } from '../atoms/card.js'
+import { Heading } from '../atoms/heading.js'
+import { LinkText } from '../atoms/link-text.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'
+import idFromString from '../shared/id-from-string.js'
+
+export function PromoCard ({ _model, ...props }) {
+  const { image, video, title, links, text, date } = _model
+  if (!title || !links || links.length === 0) {
+    throw new ValidationError()
+  }
+
+  return h(Card, {
+    ...props,
+    _model: { value: links[0].value },
+    children: h('div',
+      { className: 'flex flex-col h-full' },
+      Boolean(image?.src || video?.src) && h(Asset, { _model }),
+      h(Box,
+        h(Heading, { _level: 3, id: idFromString(title) },
+          h(LinkText, { _model: { name: title, value: links[0].value } })
+        ),
+        date && h(Time, { _time: date }),
+        text && h(RichText, text)
+      )
+    )
+  })
+}

package/src/main/organisms/promo-full.js

@@ -0,0 +1,20 @@
+import { Asset } from '../molecules/asset.js'
+import { PromoText } from '../molecules/promo-text.js'
+import h from '../shared/h.js'
+import { ValidationError } from '../routing/error-handler.js'
+
+export function PromoFull ({ _model, _variant, ...props }) {
+  const { title, text, asset } = _model
+  if (!title || !text || !asset.src) {
+    throw new ValidationError()
+  }
+
+  return h('div', { ...props, className: 'bg-bga text-txa rounded-2xl overflow-hidden lg:grid lg:grid-cols-12' },
+    h('div', { className: `col-span-6 row-start-1 ${_variant === 'right' ? '' : 'col-start-7'}` },
+      h(Asset, { _model, _tall: true })
+    ),
+    h('div', { className: 'col-span-6 row-start-1 flex items-center' },
+      h(PromoText, { _model })
+    )
+  )
+}

package/src/main/organisms/promo-image.js

@@ -0,0 +1,22 @@
+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 PromoImage ({ _model, ...props }) {
+  const { title, asset } = _model
+  if (!title || !asset.src) {
+    throw new ValidationError()
+  }
+
+  return h('div', { ...props, className: 'relative h-full rounded-2xl overflow-hidden grid' },
+    h('div', { className: 'row-start-1 col-start-1 h-full' },
+      h(Asset, { _model, _tall: true })
+    ),
+    h('div', { className: 'row-start-1 col-start-1 h-full flex items-end' },
+      h('div', { className: 'bg-bga text-txa relative w-full' },
+        h(PromoText, { _model })
+      )
+    )
+  )
+}