@koehler8/cms 1.0.0-beta.5

package/src/components/Hero.vue

@@ -0,0 +1,327 @@
+<template>
+<section
+  id="promo"
+  ref="heroSection"
+  :class="promoSectionClasses"
+  :style="promoBackgroundStyle"
+>
+    <div class="container text-center hero-content hero-inner">
+      <div class="hero-eyebrow fade-up-in js-scroll-fade" style="--fade-up-delay: 0s">
+        <h2
+          :class="[
+            'h4',
+            'text-uppercase',
+            'section-eyebrow-divider',
+            'hero-eyebrow__text',
+          ]"
+        >
+          {{ tagLine }}
+        </h2>
+      </div>
+      <h3
+        :class="[
+          'display-heading',
+          'text-uppercase',
+          'hero-headline',
+          'fade-up-in',
+          'js-scroll-fade'
+        ]"
+        style="--fade-up-delay: 0.1s"
+      >
+        <span
+          v-for="(part, index) in heroHeadlineParts"
+          :key="`${part}-${index}`"
+          :class="[
+            'display-heading__part',
+            { 'display-heading__part--nowrap': index === 0 }
+          ]"
+        >
+          {{ part }}
+        </span>
+      </h3>
+      <div
+        class="hero-cta-stack fade-up-in js-scroll-fade"
+        style="--fade-up-delay: 0.2s"
+      >
+        <a
+          v-for="(action, idx) in promoActions"
+          :key="idx"
+          :class="buildPromoActionClasses(action)"
+          :href="action.href"
+          :data-target="isComingSoonAction(action.href) ? null : action.href"
+          @click="handlePromoActionClick($event, action)"
+        >
+          {{ action.text }}
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, inject, onMounted, ref } from 'vue';
+import { useComingSoonInterstitial } from '../composables/useComingSoonInterstitial.js';
+import { usePromoBackgroundStyles } from '../composables/usePromoBackgroundStyles.js';
+import { trackEvent } from '../utils/analytics.js';
+import { useComingSoonResolver } from '../composables/useComingSoonConfig.js';
+import { useResponsiveImage } from '../utils/imageSources.js';
+import { registerScrollReveal } from '../utils/useScrollReveal.js';
+
+const { openComingSoon } = useComingSoonInterstitial();
+
+const pageContent = inject('pageContent', ref({}));
+const siteData = inject('siteData', ref({}));
+const { resolve: resolveComingSoon, isComingSoonAction } = useComingSoonResolver(pageContent);
+
+const promoData = computed(() => pageContent.value?.promo || {});
+
+const tagLine = computed(() => promoData.value?.tagLine || '');
+const siteName = computed(() => promoData.value?.mainText || '');
+const promoActions = computed(() =>
+  (Array.isArray(promoData.value?.actions) ? promoData.value.actions : []).map(
+    (action, index) => normalizePromoAction(action, index)
+  )
+);
+
+const heroHeadlineParts = computed(() => {
+  const value = siteName.value || '';
+  if (!value.includes('.')) {
+    return [value];
+  }
+  const segments = value.split('.').map((segment) => segment.trim()).filter(Boolean);
+  if (!segments.length) return [value];
+  return segments.map((segment, index) => (index < segments.length - 1 ? `${segment}.` : segment));
+});
+
+const promoImageSet = useResponsiveImage('img/promo', {
+  widths: [960, 1440, 1920],
+  fallbackFormat: 'jpg',
+});
+
+const heroSection = ref(null);
+const HERO_SCROLL_MARGIN = 32;
+const HERO_SMALL_SCREEN_QUERY = '(max-width: 640px)';
+
+const promoSectionClasses = computed(() => [
+  'promo-surface',
+  'section-shell',
+  'hero-shell',
+]);
+
+const promoBackgroundStyle = usePromoBackgroundStyles({
+  imageSet: promoImageSet,
+});
+
+onMounted(() => {
+  if (!heroSection.value) return;
+  const targets = heroSection.value.querySelectorAll('.js-scroll-fade');
+  registerScrollReveal(targets);
+});
+
+function normalizePromoAction(entry, index) {
+  const action = entry && typeof entry === 'object' ? { ...entry } : {};
+  action.variant = resolveActionVariant(action, index);
+  return action;
+}
+
+function resolveActionVariant(action, index) {
+  const style = typeof action?.style === 'string' ? action.style.trim().toLowerCase() : '';
+  if (style === 'link' || style === 'text') {
+    return 'link';
+  }
+  if (style === 'dark' || style === 'primary' || style === 'solid') {
+    return 'primary';
+  }
+  if (style === 'light' || style === 'secondary' || style === 'outline' || style === 'ghost') {
+    return 'secondary';
+  }
+  return index === 0 ? 'primary' : 'secondary';
+}
+
+function buildPromoActionClasses(action = {}) {
+  const variant = action.variant || 'secondary';
+  const classes = [];
+  if (variant === 'link') {
+    classes.push('action-link');
+  } else {
+    classes.push('action-pill');
+    if (variant === 'primary') {
+      classes.push('primary-button');
+    } else {
+      classes.push('action-pill--secondary');
+    }
+  }
+  return classes;
+}
+
+function handlePromoActionClick(event, action) {
+  if (!event) return;
+
+  const label = (action?.text ?? '').toString();
+  const trimmedLabel = label.trim();
+
+  const href = (action?.href ?? '').toString().trim();
+
+  const modalPayload = resolveComingSoon({
+    href,
+  });
+  if (modalPayload) {
+    event.preventDefault();
+    openComingSoon(modalPayload);
+    trackEvent('coming_soon_interstitial_shown', {
+      trigger: 'promo-action',
+      label: trimmedLabel ? trimmedLabel.toLowerCase() : 'coming-soon',
+    });
+    return;
+  }
+
+  if (shouldHandleAnchorScroll(href)) {
+    event.preventDefault();
+    scrollToPromoTarget(href);
+  }
+}
+
+function shouldHandleAnchorScroll(href) {
+  if (typeof href !== 'string') return false;
+  const trimmed = href.trim();
+  if (!trimmed.length) return false;
+  return trimmed.startsWith('#') && trimmed.length > 1;
+}
+
+function scrollToPromoTarget(targetSelector) {
+  if (typeof document === 'undefined' || typeof window === 'undefined') return;
+  if (!targetSelector) return;
+  const element = document.querySelector(targetSelector);
+  if (!element) return;
+
+  const rect = element.getBoundingClientRect();
+  const headerOffset = getHeaderOffset();
+  const isCompact = window.matchMedia && window.matchMedia(HERO_SMALL_SCREEN_QUERY).matches;
+  const scrollMargin = isCompact ? 0 : HERO_SCROLL_MARGIN;
+  const targetTop = Math.max(rect.top + window.pageYOffset - headerOffset - scrollMargin, 0);
+
+  window.scrollTo({
+    top: targetTop,
+    behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+  });
+}
+
+function prefersReducedMotion() {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return false;
+  }
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function getHeaderOffset() {
+  if (typeof document === 'undefined') return 0;
+  const header = document.getElementById('js-header');
+  if (!header) return 0;
+  return header.offsetHeight || 0;
+}
+</script>
+
+<style scoped>
+
+.hero-shell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh + 60px);
+  padding-block: clamp(96px, 18vh, 200px);
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero-inner {
+  width: min(960px, 90vw);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ui-space-16, 16px);
+  text-align: center;
+}
+
+.hero-eyebrow {
+  margin-bottom: var(--ui-space-16, 16px);
+}
+
+.hero-eyebrow__text {
+  display: inline-block;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  font-size: clamp(1.1rem, 1.5vw, 1.55rem);
+  line-height: 1.35;
+  color: var(--hero-text-color, var(--ui-text-primary, var(--brand-fg-100, #111)));
+  border-bottom: 1px solid currentColor;
+}
+
+.hero-headline {
+  font-weight: 700;
+  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
+  line-height: 1.08;
+  margin-bottom: clamp(18px, 2.5vw, 28px);
+  letter-spacing: 0.04em;
+  color: var(--hero-text-color, var(--ui-text-primary, var(--brand-fg-100, #111)));
+}
+
+.promo-surface {
+  position: relative;
+  min-height: var(--promo-surface-min-height, calc(100vh + 75px));
+  background: var(
+    --promo-surface-bg,
+    var(--hero-surface-bg, var(--theme-body-background, #060212))
+  );
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.hero-cta-stack {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(170px, max-content));
+  justify-content: center;
+  justify-items: center;
+  column-gap: 20px;
+  row-gap: 16px;
+  margin-bottom: var(--ui-space-24, 24px);
+  max-width: min(960px, 100%);
+  margin-inline: auto;
+}
+
+.hero-cta-stack :deep(.primary-button),
+.hero-cta-stack :deep(.action-pill) {
+  width: auto;
+  min-width: 170px;
+  padding: 0.75rem 1.8rem;
+  min-height: 46px;
+  font-size: 0.88rem;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 480px) {
+  .hero-headline {
+    font-size: clamp(2rem, 9vw, 3rem);
+  }
+}
+
+@media (max-width: 640px) {
+  .hero-cta-stack {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 14px;
+  }
+
+  .hero-cta-stack :deep(.primary-button),
+  .hero-cta-stack :deep(.action-pill) {
+    width: 100%;
+    padding: 0.7rem 1.1rem;
+    min-height: 42px;
+    font-size: 0.84rem;
+  }
+}
+
+</style>

package/src/components/Home.vue

@@ -0,0 +1,144 @@
+<template>
+  <IntroGate
+    :enabled="introGateEnabled"
+    v-bind="introGateProps"
+  />
+  <main>
+    <component
+      v-for="entry in loadedComponents"
+      :is="entry.component"
+      :key="entry.key"
+      v-bind="entry.props"
+    />
+    <div
+      v-if="showLoadingIndicator"
+      class="page-loading-placeholder"
+      role="status"
+      aria-live="polite"
+    >
+      Loading…
+    </div>
+    <div
+      v-else-if="loadErrorMessage"
+      class="page-error-message"
+      role="alert"
+    >
+      {{ loadErrorMessage }}
+    </div>
+  </main>
+  <ComingSoonModal
+    :open="isComingSoonVisible"
+    :title="comingSoonTitle"
+    :message="comingSoonMessage"
+    @close="closeComingSoon"
+  />
+</template>
+
+<script setup>
+import { computed, nextTick, provide, watch } from 'vue';
+
+import ComingSoonModal from '../components/ComingSoonModal.vue';
+import IntroGate from '../components/IntroGate.vue';
+
+import { registry } from '../utils/componentRegistry.js';
+import { usePageConfig } from '../composables/usePageConfig.js';
+import { useComponentResolver } from '../composables/useComponentResolver.js';
+import { usePageMeta } from '../composables/usePageMeta.js';
+import { useIntroGate } from '../composables/useIntroGate.js';
+import { useEngagementTracking } from '../composables/useEngagementTracking.js';
+import { useComingSoonInterstitial } from '../composables/useComingSoonInterstitial.js';
+
+const props = defineProps({
+  pageId: {
+    type: String,
+    default: null,
+  },
+  pagePath: {
+    type: String,
+    default: null,
+  },
+  locale: {
+    type: String,
+    default: null,
+  },
+});
+
+const {
+  siteData,
+  pageContent,
+  currentPage,
+  componentKeys,
+  isLoading,
+  loadError,
+} = usePageConfig({
+  pageId: () => props.pageId,
+  pagePath: () => props.pagePath,
+  locale: () => props.locale,
+});
+
+const { loadedComponents } = useComponentResolver({
+  componentKeys,
+  pageContent,
+  currentPage,
+  registry,
+});
+
+const { introGateEnabled, introGateProps } = useIntroGate({ siteData, pageContent });
+
+usePageMeta({ siteData, currentPage });
+
+const {
+  isComingSoonVisible,
+  comingSoonTitle,
+  comingSoonMessage,
+  closeComingSoon,
+} = useComingSoonInterstitial();
+
+const { refreshVisibilityTargets, resetEngagementTracking } = useEngagementTracking({
+  getContext: () => ({
+    page_id: currentPage.value.id || '',
+    locale: props.locale || '',
+  }),
+});
+
+provide('siteData', siteData);
+provide('pageContent', pageContent);
+provide('pageConfig', currentPage);
+provide('currentPageId', computed(() => currentPage.value.id));
+
+const showLoadingIndicator = computed(() => isLoading.value && componentKeys.value.length === 0 && !loadError.value);
+const loadErrorMessage = computed(() => loadError.value ? (loadError.value.message || 'Unable to load page content.') : '');
+
+watch(componentKeys, async () => {
+  await nextTick();
+  refreshVisibilityTargets();
+}, { flush: 'post' });
+
+watch(
+  () => currentPage.value.id,
+  async () => {
+    await nextTick();
+    resetEngagementTracking();
+    refreshVisibilityTargets();
+  },
+  { immediate: true, flush: 'post' },
+);
+</script>
+
+<style scoped>
+.page-loading-placeholder,
+.page-error-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40vh;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #111;
+  text-align: center;
+}
+
+.page-error-message {
+  color: #b00020;
+}
+</style>

package/src/components/Intro.vue

@@ -0,0 +1,130 @@
+<template>
+  <section id="about" class="section-shell intro-section" data-analytics-section="intro">
+    <div class="container">
+      <div class="intro-grid">
+        <div class="intro-column">
+          <div class="intro-heading">
+            <h2 class="intro-title">
+              {{ introTitle }}
+            </h2>
+            <div class="intro-divider" aria-hidden="true"></div>
+          </div>
+          <div class="intro-copy">
+            <p>{{ introText }}</p>
+          </div>
+        </div>
+        <div class="intro-column">
+          <div
+            ref="introImageTarget"
+            class="responsive-picture-shell rounded intro-media"
+            style="aspect-ratio: 18 / 10;"
+          >
+            <picture v-if="isIntroImageVisible" class="responsive-picture">
+              <source
+                v-for="source in introImageSources"
+                :key="source.type"
+                :type="source.type"
+                :srcset="source.srcset"
+                :sizes="introImageSizes"
+              />
+              <img
+                :src="introImageFallback"
+                :srcset="introImageFallbackSet || undefined"
+                :sizes="introImageSizes"
+                :alt="introImgText"
+                @error="introImageHandleError"
+                width="540"
+                height="300"
+                loading="lazy"
+                decoding="async"
+                class="rounded intro-image responsive-picture__img"
+              />
+            </picture>
+            <div
+              v-else
+              class="responsive-picture-placeholder rounded intro-image"
+              :style="introPlaceholder ? { backgroundImage: `url(${introPlaceholder})` } : null"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+  import { computed, inject, ref } from 'vue';
+  import { useResponsiveImage } from '../utils/imageSources.js';
+  import { useLazyImage } from '../composables/useLazyImage.js';
+
+  const injectedSiteData = inject('siteData', ref({}));
+  const pageContent = inject('pageContent', ref({}));
+
+  const introData = computed(() => pageContent.value?.intro || {});
+
+  const introTitle = computed(() => introData.value?.title || '');
+  const introText = computed(() => introData.value?.text || '');
+
+  const introImage = useResponsiveImage('img/intro', {
+    widths: [320, 540],
+    fallbackFormat: 'jpg',
+  });
+  const introImageHandleError = introImage.handleError;
+
+  const introImageSizes = '(min-width: 1200px) 40vw, (min-width: 992px) 45vw, 100vw';
+  const { isVisible: isIntroImageVisible, targetRef: introImageTarget } = useLazyImage({
+    rootMargin: '200px 0px',
+  });
+
+  const introImageSources = introImage.sources;
+  const introImageFallback = introImage.fallbackSrc;
+  const introImageFallbackSet = introImage.fallbackSrcSet;
+  const introPlaceholder = introImage.placeholderSrc;
+
+const introImgText = computed(() => {
+    if (introData.value?.imgAlt) return introData.value.imgAlt;
+    const siteTitle = injectedSiteData.value?.site?.title || '';
+    return siteTitle ? `Introducing ${siteTitle}` : 'Introducing';
+  });
+</script>
+
+<style scoped>
+.intro-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: clamp(24px, 6vw, 48px);
+  align-items: center;
+}
+
+.intro-heading {
+  margin-bottom: var(--ui-space-24, 24px);
+}
+
+.intro-title {
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: clamp(1.5rem, 4vw, 2.25rem);
+  margin: 0 0 0.75rem;
+}
+
+.intro-divider {
+  width: 60px;
+  height: 3px;
+  background: var(--intro-divider-color, var(--brand-accent-electric, #4f6cf0));
+  border-radius: 999px;
+  margin-top: var(--ui-space-12, 12px);
+}
+
+.intro-copy {
+  font-size: 1rem;
+  color: var(--ui-text-primary, var(--brand-fg-100, #1f2a44));
+}
+
+.intro-media {
+  transition: box-shadow 0.3s ease;
+}
+
+.intro-image {
+  border-radius: inherit;
+}
+</style>