@birdycom/omniaui-vue 0.11.0 → 0.11.2

package/src/blocks/OcBlockPageHero.vue

@@ -1,13 +1,13 @@
-<script setup lang="ts">
-/** Page header (the oc-hero used on every docs page): eyebrow, title, text, actions. Classes: .oc-hero, -eyebrow, -title, -text, -actions */
-defineProps<{ eyebrow?: string; title: string; text?: string }>()
-</script>
-
-<template>
-  <section class="oc-hero">
-    <span v-if="eyebrow" class="oc-hero-eyebrow">{{ eyebrow }}</span>
-    <h1 class="oc-hero-title">{{ title }}</h1>
-    <p v-if="text" class="oc-hero-text">{{ text }}</p>
-    <div v-if="$slots.actions" class="oc-hero-actions"><slot name="actions" /></div>
-  </section>
-</template>
+<script setup lang="ts">
+/** Page header (the oc-hero used on every docs page): eyebrow, title, text, actions. Classes: .oc-hero, -eyebrow, -title, -text, -actions */
+defineProps<{ eyebrow?: string; title: string; text?: string }>()
+</script>
+
+<template>
+  <section class="oc-hero">
+    <span v-if="eyebrow" class="oc-hero-eyebrow">{{ eyebrow }}</span>
+    <h1 class="oc-hero-title">{{ title }}</h1>
+    <p v-if="text" class="oc-hero-text">{{ text }}</p>
+    <div v-if="$slots.actions" class="oc-hero-actions"><slot name="actions" /></div>
+  </section>
+</template>

package/src/blocks/OcBlockPortfolioGrid.vue

@@ -1,63 +1,63 @@
-<!-- File: packages/vue/src/blocks/OcBlockPortfolioGrid.vue | Map: props -> head (title, lead, link slot) -> grid of OcProjectCard -->
-<script setup lang="ts">
-/**
- * Portfolio section: heading, lead, "all projects" link and a grid of project cards.
- * `title` + `highlight` (gradient word). Slots: link, default (own cards). Classes: .oc-block-portfolio (--two), -head, -lead, -grid
- */
-import OcProjectCard from '../components/OcProjectCard.vue'
-import { useUid } from '../composables/useUid'
-
-export interface PortfolioGridProject {
-  href: string
-  name: string
-  type?: string
-  meta?: string
-  more?: string
-  image?: string
-  imageAlt?: string
-  accent?: string
-}
-withDefaults(
-  defineProps<{
-    eyebrow?: string
-    title?: string
-    highlight?: string
-    lead?: string
-    projects?: PortfolioGridProject[]
-    two?: boolean
-  }>(),
-  { projects: () => [] },
-)
-const titleId = useUid('oc-portfolio-title')
-</script>
-
-<template>
-  <section :class="['oc-block-portfolio oc-section-pad', two && 'oc-block-portfolio--two']" :aria-labelledby="titleId">
-    <div class="oc-container">
-      <div class="oc-block-portfolio-head">
-        <div>
-          <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-          <h2 :id="titleId" class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
-          <p v-if="lead" class="oc-block-portfolio-lead">{{ lead }}</p>
-        </div>
-        <slot name="link" />
-      </div>
-      <div class="oc-block-portfolio-grid">
-        <slot>
-          <OcProjectCard
-            v-for="(p, i) in projects"
-            :key="i"
-            :class="p.accent && `oc-accent--${p.accent}`"
-            :href="p.href"
-            :name="p.name"
-            :type="p.type"
-            :meta="p.meta"
-            :more="p.more ?? 'View project'"
-            :image="p.image"
-            :image-alt="p.imageAlt"
-          />
-        </slot>
-      </div>
-    </div>
-  </section>
-</template>
+<!-- File: packages/vue/src/blocks/OcBlockPortfolioGrid.vue | Map: props -> head (title, lead, link slot) -> grid of OcProjectCard -->
+<script setup lang="ts">
+/**
+ * Portfolio section: heading, lead, "all projects" link and a grid of project cards.
+ * `title` + `highlight` (gradient word). Slots: link, default (own cards). Classes: .oc-block-portfolio (--two), -head, -lead, -grid
+ */
+import OcProjectCard from '../components/OcProjectCard.vue'
+import { useUid } from '../composables/useUid'
+
+export interface PortfolioGridProject {
+  href: string
+  name: string
+  type?: string
+  meta?: string
+  more?: string
+  image?: string
+  imageAlt?: string
+  accent?: string
+}
+withDefaults(
+  defineProps<{
+    eyebrow?: string
+    title?: string
+    highlight?: string
+    lead?: string
+    projects?: PortfolioGridProject[]
+    two?: boolean
+  }>(),
+  { projects: () => [] },
+)
+const titleId = useUid('oc-portfolio-title')
+</script>
+
+<template>
+  <section :class="['oc-block-portfolio oc-section-pad', two && 'oc-block-portfolio--two']" :aria-labelledby="titleId">
+    <div class="oc-container">
+      <div class="oc-block-portfolio-head">
+        <div>
+          <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+          <h2 :id="titleId" class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+          <p v-if="lead" class="oc-block-portfolio-lead">{{ lead }}</p>
+        </div>
+        <slot name="link" />
+      </div>
+      <div class="oc-block-portfolio-grid">
+        <slot>
+          <OcProjectCard
+            v-for="(p, i) in projects"
+            :key="i"
+            :class="p.accent && `oc-accent--${p.accent}`"
+            :href="p.href"
+            :name="p.name"
+            :type="p.type"
+            :meta="p.meta"
+            :more="p.more ?? 'View project'"
+            :image="p.image"
+            :image-alt="p.imageAlt"
+          />
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockPricing.vue

@@ -1,39 +1,39 @@
-<script setup lang="ts">
-/**
- * Pricing cards with a featured plan. Emits `select` with the plan when its button is clicked.
- * Slot `action` (scoped: { plan }) replaces the button. Classes: .oc-block-pricing, -grid, -card(--featured),
- * -name, -desc, -price, -features
- */
-export interface PricingPlan {
-  name: string
-  description?: string
-  price: string
-  /** e.g. "/month" */
-  period?: string
-  features: string[]
-  cta: string
-  featured?: boolean
-}
-defineProps<{ title?: string; description?: string; plans: PricingPlan[] }>()
-defineEmits<{ select: [plan: PricingPlan] }>()
-</script>
-
-<template>
-  <div class="oc-block-pricing">
-    <h2 v-if="title">{{ title }}</h2>
-    <p v-if="description">{{ description }}</p>
-    <div class="oc-block-pricing-grid">
-      <div v-for="plan in plans" :key="plan.name" :class="['oc-block-pricing-card', plan.featured && 'oc-block-pricing-card--featured']">
-        <p class="oc-block-pricing-name">{{ plan.name }}</p>
-        <p v-if="plan.description" class="oc-block-pricing-desc">{{ plan.description }}</p>
-        <p class="oc-block-pricing-price">{{ plan.price }} <span v-if="plan.period">{{ plan.period }}</span></p>
-        <ul class="oc-block-pricing-features">
-          <li v-for="f in plan.features" :key="f">{{ f }}</li>
-        </ul>
-        <slot name="action" :plan="plan">
-          <button :class="['oc-btn', !plan.featured && 'oc-btn--outline']" type="button" style="width: 100%" @click="$emit('select', plan)">{{ plan.cta }}</button>
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+/**
+ * Pricing cards with a featured plan. Emits `select` with the plan when its button is clicked.
+ * Slot `action` (scoped: { plan }) replaces the button. Classes: .oc-block-pricing, -grid, -card(--featured),
+ * -name, -desc, -price, -features
+ */
+export interface PricingPlan {
+  name: string
+  description?: string
+  price: string
+  /** e.g. "/month" */
+  period?: string
+  features: string[]
+  cta: string
+  featured?: boolean
+}
+defineProps<{ title?: string; description?: string; plans: PricingPlan[] }>()
+defineEmits<{ select: [plan: PricingPlan] }>()
+</script>
+
+<template>
+  <div class="oc-block-pricing">
+    <h2 v-if="title">{{ title }}</h2>
+    <p v-if="description">{{ description }}</p>
+    <div class="oc-block-pricing-grid">
+      <div v-for="plan in plans" :key="plan.name" :class="['oc-block-pricing-card', plan.featured && 'oc-block-pricing-card--featured']">
+        <p class="oc-block-pricing-name">{{ plan.name }}</p>
+        <p v-if="plan.description" class="oc-block-pricing-desc">{{ plan.description }}</p>
+        <p class="oc-block-pricing-price">{{ plan.price }} <span v-if="plan.period">{{ plan.period }}</span></p>
+        <ul class="oc-block-pricing-features">
+          <li v-for="f in plan.features" :key="f">{{ f }}</li>
+        </ul>
+        <slot name="action" :plan="plan">
+          <button :class="['oc-btn', !plan.featured && 'oc-btn--outline']" type="button" style="width: 100%" @click="$emit('select', plan)">{{ plan.cta }}</button>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/blocks/OcBlockProcess.vue

@@ -1,39 +1,39 @@
-<script setup lang="ts">
-/**
- * Numbered steps (CSS counter) + an endless marquee of technologies (the list is rendered twice, the copy aria-hidden).
- * Classes: .oc-section-pad, .oc-container, .oc-eyebrow, .oc-display(--md), .oc-text-gradient, .oc-steps, .oc-marquee
- */
-export interface ProcessStep {
-  title: string
-  text: string
-}
-defineProps<{
-  eyebrow?: string
-  title?: string
-  highlight?: string
-  steps: ProcessStep[]
-  marquee?: string[]
-  marqueeLabel?: string
-}>()
-</script>
-
-<template>
-  <section class="oc-section-pad">
-    <div class="oc-container">
-      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
-      <ol class="oc-steps">
-        <li v-for="step in steps" :key="step.title">
-          <h3>{{ step.title }}</h3>
-          <p>{{ step.text }}</p>
-        </li>
-      </ol>
-      <div v-if="marquee?.length" class="oc-marquee mt-4" :aria-label="marqueeLabel">
-        <div class="oc-marquee__track">
-          <span v-for="item in marquee" :key="item" class="oc-marquee__item">{{ item }}</span>
-          <span v-for="item in marquee" :key="'copy-' + item" class="oc-marquee__item" aria-hidden="true">{{ item }}</span>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+/**
+ * Numbered steps (CSS counter) + an endless marquee of technologies (the list is rendered twice, the copy aria-hidden).
+ * Classes: .oc-section-pad, .oc-container, .oc-eyebrow, .oc-display(--md), .oc-text-gradient, .oc-steps, .oc-marquee
+ */
+export interface ProcessStep {
+  title: string
+  text: string
+}
+defineProps<{
+  eyebrow?: string
+  title?: string
+  highlight?: string
+  steps: ProcessStep[]
+  marquee?: string[]
+  marqueeLabel?: string
+}>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+      <ol class="oc-steps">
+        <li v-for="step in steps" :key="step.title">
+          <h3>{{ step.title }}</h3>
+          <p>{{ step.text }}</p>
+        </li>
+      </ol>
+      <div v-if="marquee?.length" class="oc-marquee mt-4" :aria-label="marqueeLabel">
+        <div class="oc-marquee__track">
+          <span v-for="item in marquee" :key="item" class="oc-marquee__item">{{ item }}</span>
+          <span v-for="item in marquee" :key="'copy-' + item" class="oc-marquee__item" aria-hidden="true">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockProductGrid.vue

@@ -1,41 +1,41 @@
-<script setup lang="ts">
-/**
- * Section title + grid of product cards, each with its own accent color (oc-accent--green|orange|violet|cyan...).
- * Classes: .oc-card-grid, .oc-product-card, -top, -name, -tagline, -summary, -more, .oc-icon-tile, .oc-pill
- */
-export interface ProductItem {
-  name: string
-  tagline?: string
-  summary?: string
-  /** Pill text, e.g. "Own product" */
-  tag?: string
-  /** Glyph for the icon tile */
-  icon?: string
-  /** Accent name: green, orange, violet, cyan, ... */
-  accent?: string
-  href?: string
-  more?: string
-}
-defineProps<{ eyebrow?: string; title?: string; highlight?: string; products: ProductItem[] }>()
-</script>
-
-<template>
-  <section class="oc-section-pad">
-    <div class="oc-container">
-      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
-      <div class="oc-card-grid">
-        <a v-for="p in products" :key="p.name" :class="['oc-product-card', p.accent && `oc-accent--${p.accent}`]" :href="p.href ?? '#'">
-          <div class="oc-product-card__top">
-            <span class="oc-icon-tile" aria-hidden="true">{{ p.icon }}</span>
-            <span v-if="p.tag" class="oc-pill">{{ p.tag }}</span>
-          </div>
-          <h3 class="oc-product-card__name">{{ p.name }}</h3>
-          <p v-if="p.tagline" class="oc-product-card__tagline">{{ p.tagline }}</p>
-          <p v-if="p.summary" class="oc-product-card__summary">{{ p.summary }}</p>
-          <span v-if="p.more" class="oc-product-card__more">{{ p.more }}</span>
-        </a>
-      </div>
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+/**
+ * Section title + grid of product cards, each with its own accent color (oc-accent--green|orange|violet|cyan...).
+ * Classes: .oc-card-grid, .oc-product-card, -top, -name, -tagline, -summary, -more, .oc-icon-tile, .oc-pill
+ */
+export interface ProductItem {
+  name: string
+  tagline?: string
+  summary?: string
+  /** Pill text, e.g. "Own product" */
+  tag?: string
+  /** Glyph for the icon tile */
+  icon?: string
+  /** Accent name: green, orange, violet, cyan, ... */
+  accent?: string
+  href?: string
+  more?: string
+}
+defineProps<{ eyebrow?: string; title?: string; highlight?: string; products: ProductItem[] }>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+      <div class="oc-card-grid">
+        <a v-for="p in products" :key="p.name" :class="['oc-product-card', p.accent && `oc-accent--${p.accent}`]" :href="p.href ?? '#'">
+          <div class="oc-product-card__top">
+            <span class="oc-icon-tile" aria-hidden="true">{{ p.icon }}</span>
+            <span v-if="p.tag" class="oc-pill">{{ p.tag }}</span>
+          </div>
+          <h3 class="oc-product-card__name">{{ p.name }}</h3>
+          <p v-if="p.tagline" class="oc-product-card__tagline">{{ p.tagline }}</p>
+          <p v-if="p.summary" class="oc-product-card__summary">{{ p.summary }}</p>
+          <span v-if="p.more" class="oc-product-card__more">{{ p.more }}</span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>

package/src/blocks/OcBlockProfileHeader.vue

@@ -1,50 +1,50 @@
-<!-- File: packages/vue/src/blocks/OcBlockProfileHeader.vue | Map: props -> banner -> bar (avatar slot, info, actions slot) -> tabs -->
-<script setup lang="ts">
-/**
- * Profile / channel header: banner, overhanging avatar, name, meta, bio, actions and link tabs.
- * Slots: avatar (initials or <img>), actions, bio. Classes: .oc-block-profile (--compact), -banner, -bar, -avatar,
- * -info, -name, -meta, -bio, -actions, -tabs, -tab (aria-current="page")
- */
-import { computed } from 'vue'
-import { useUid } from '../composables/useUid'
-
-export interface ProfileHeaderTab {
-  label: string
-  href: string
-  current?: boolean
-}
-const props = withDefaults(
-  defineProps<{
-    name: string
-    meta?: string
-    bio?: string
-    initials?: string
-    banner?: string
-    tabs?: ProfileHeaderTab[]
-    tabsLabel?: string
-    compact?: boolean
-    headingLevel?: 1 | 2
-  }>(),
-  { tabs: () => [], tabsLabel: 'Profile sections', headingLevel: 1 },
-)
-const nameId = useUid('oc-profile-name')
-const bannerStyle = computed(() => (props.banner ? `--oc-profile-banner: url("${props.banner}")` : undefined))
-</script>
-
-<template>
-  <section :class="['oc-block-profile', compact && 'oc-block-profile--compact']" :aria-labelledby="nameId">
-    <div class="oc-block-profile-banner" :style="bannerStyle" aria-hidden="true"></div>
-    <div class="oc-block-profile-bar">
-      <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true"><slot name="avatar">{{ initials }}</slot></span>
-      <div class="oc-block-profile-info">
-        <component :is="headingLevel === 1 ? 'h1' : 'h2'" :id="nameId" class="oc-block-profile-name">{{ name }}</component>
-        <p v-if="meta" class="oc-block-profile-meta">{{ meta }}</p>
-        <p v-if="bio || $slots.bio" class="oc-block-profile-bio"><slot name="bio">{{ bio }}</slot></p>
-      </div>
-      <div v-if="$slots.actions" class="oc-block-profile-actions"><slot name="actions" /></div>
-    </div>
-    <nav v-if="tabs.length" class="oc-block-profile-tabs" :aria-label="tabsLabel">
-      <a v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-tab" :href="tab.href" :aria-current="tab.current ? 'page' : undefined">{{ tab.label }}</a>
-    </nav>
-  </section>
-</template>
+<!-- File: packages/vue/src/blocks/OcBlockProfileHeader.vue | Map: props -> banner -> bar (avatar slot, info, actions slot) -> tabs -->
+<script setup lang="ts">
+/**
+ * Profile / channel header: banner, overhanging avatar, name, meta, bio, actions and link tabs.
+ * Slots: avatar (initials or <img>), actions, bio. Classes: .oc-block-profile (--compact), -banner, -bar, -avatar,
+ * -info, -name, -meta, -bio, -actions, -tabs, -tab (aria-current="page")
+ */
+import { computed } from 'vue'
+import { useUid } from '../composables/useUid'
+
+export interface ProfileHeaderTab {
+  label: string
+  href: string
+  current?: boolean
+}
+const props = withDefaults(
+  defineProps<{
+    name: string
+    meta?: string
+    bio?: string
+    initials?: string
+    banner?: string
+    tabs?: ProfileHeaderTab[]
+    tabsLabel?: string
+    compact?: boolean
+    headingLevel?: 1 | 2
+  }>(),
+  { tabs: () => [], tabsLabel: 'Profile sections', headingLevel: 1 },
+)
+const nameId = useUid('oc-profile-name')
+const bannerStyle = computed(() => (props.banner ? `--oc-profile-banner: url("${props.banner}")` : undefined))
+</script>
+
+<template>
+  <section :class="['oc-block-profile', compact && 'oc-block-profile--compact']" :aria-labelledby="nameId">
+    <div class="oc-block-profile-banner" :style="bannerStyle" aria-hidden="true"></div>
+    <div class="oc-block-profile-bar">
+      <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true"><slot name="avatar">{{ initials }}</slot></span>
+      <div class="oc-block-profile-info">
+        <component :is="headingLevel === 1 ? 'h1' : 'h2'" :id="nameId" class="oc-block-profile-name">{{ name }}</component>
+        <p v-if="meta" class="oc-block-profile-meta">{{ meta }}</p>
+        <p v-if="bio || $slots.bio" class="oc-block-profile-bio"><slot name="bio">{{ bio }}</slot></p>
+      </div>
+      <div v-if="$slots.actions" class="oc-block-profile-actions"><slot name="actions" /></div>
+    </div>
+    <nav v-if="tabs.length" class="oc-block-profile-tabs" :aria-label="tabsLabel">
+      <a v-for="(tab, i) in tabs" :key="i" class="oc-block-profile-tab" :href="tab.href" :aria-current="tab.current ? 'page' : undefined">{{ tab.label }}</a>
+    </nav>
+  </section>
+</template>

package/src/blocks/OcBlockShowcase.vue

@@ -1,43 +1,43 @@
-<script setup lang="ts">
-/**
- * Portfolio grid: project cards with a browser frame around the screenshot.
- * `background` is any CSS background (use Omnia tokens, e.g. linear-gradient(135deg, var(--color-green-40), var(--color-teal-80))); `image` shows an img.
- * Classes: .oc-card-grid, .oc-product-card, .oc-browser-frame(__bar/__body), .oc-pill--accent
- */
-export interface ShowcaseProject {
-  name: string
-  summary?: string
-  tag?: string
-  accent?: string
-  href?: string
-  background?: string
-  image?: string
-  more?: string
-}
-defineProps<{ eyebrow?: string; title?: string; highlight?: string; projects: ShowcaseProject[] }>()
-</script>
-
-<template>
-  <section class="oc-section-pad">
-    <div class="oc-container">
-      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
-      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
-      <div class="oc-card-grid" style="--oc-card-min: 26rem">
-        <a v-for="p in projects" :key="p.name" :class="['oc-product-card', p.accent && `oc-accent--${p.accent}`, 'p-0 overflow-hidden']" :href="p.href ?? '#'">
-          <span class="oc-browser-frame m-1">
-            <span class="oc-browser-frame__bar"><i></i><i></i><i></i></span>
-            <span class="oc-browser-frame__body" :style="p.background ? { background: p.background } : undefined">
-              <img v-if="p.image" :src="p.image" alt="" />
-            </span>
-          </span>
-          <span class="grid gap-0.5 p-1.5 pt-0">
-            <span v-if="p.tag" class="oc-pill oc-pill--accent">{{ p.tag }}</span>
-            <span class="oc-product-card__name">{{ p.name }}</span>
-            <span v-if="p.summary" class="oc-product-card__summary">{{ p.summary }}</span>
-            <span v-if="p.more" class="oc-product-card__more">{{ p.more }}</span>
-          </span>
-        </a>
-      </div>
-    </div>
-  </section>
-</template>
+<script setup lang="ts">
+/**
+ * Portfolio grid: project cards with a browser frame around the screenshot.
+ * `background` is any CSS background (use Omnia tokens, e.g. linear-gradient(135deg, var(--color-green-40), var(--color-teal-80))); `image` shows an img.
+ * Classes: .oc-card-grid, .oc-product-card, .oc-browser-frame(__bar/__body), .oc-pill--accent
+ */
+export interface ShowcaseProject {
+  name: string
+  summary?: string
+  tag?: string
+  accent?: string
+  href?: string
+  background?: string
+  image?: string
+  more?: string
+}
+defineProps<{ eyebrow?: string; title?: string; highlight?: string; projects: ShowcaseProject[] }>()
+</script>
+
+<template>
+  <section class="oc-section-pad">
+    <div class="oc-container">
+      <p v-if="eyebrow" class="oc-eyebrow">{{ eyebrow }}</p>
+      <h2 class="oc-display oc-display--md">{{ title }} <span v-if="highlight" class="oc-text-gradient">{{ highlight }}</span></h2>
+      <div class="oc-card-grid" style="--oc-card-min: 26rem">
+        <a v-for="p in projects" :key="p.name" :class="['oc-product-card', p.accent && `oc-accent--${p.accent}`, 'p-0 overflow-hidden']" :href="p.href ?? '#'">
+          <span class="oc-browser-frame m-1">
+            <span class="oc-browser-frame__bar"><i></i><i></i><i></i></span>
+            <span class="oc-browser-frame__body" :style="p.background ? { background: p.background } : undefined">
+              <img v-if="p.image" :src="p.image" alt="" />
+            </span>
+          </span>
+          <span class="grid gap-0.5 p-1.5 pt-0">
+            <span v-if="p.tag" class="oc-pill oc-pill--accent">{{ p.tag }}</span>
+            <span class="oc-product-card__name">{{ p.name }}</span>
+            <span v-if="p.summary" class="oc-product-card__summary">{{ p.summary }}</span>
+            <span v-if="p.more" class="oc-product-card__more">{{ p.more }}</span>
+          </span>
+        </a>
+      </div>
+    </div>
+  </section>
+</template>