@ternent/core 0.0.1

package/packages/ui/src/patterns/LandingPage/LandingIcon.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { LandingPageIcon } from "./LandingPage.types";
+
+const props = withDefaults(
+  defineProps<{
+    name?: LandingPageIcon;
+  }>(),
+  {
+    name: "spark",
+  },
+);
+
+const pathData = computed(() => {
+  switch (props.name) {
+    case "globe":
+      return [
+        "circle 12 12 9",
+        "path M3 12h18",
+        "path M12 3a14 14 0 0 1 0 18",
+        "path M12 3a14 14 0 0 0 0 18",
+      ];
+    case "pin":
+      return [
+        "path M12 3a7 7 0 0 0-7 7c0 5 7 11 7 11s7-6 7-11a7 7 0 0 0-7-7Z",
+        "path M12 8v5",
+        "path M9.5 10.5h5",
+      ];
+    case "shield":
+      return ["path m12 3 8 4.5v9L12 21 4 16.5v-9L12 3Z", "path m9 12 2 2 4-4"];
+    case "check":
+      return ["rect 4 4 16 16 2", "path m8 12 2.5 2.5L16 9"];
+    case "stack":
+      return ["path M12 3 4 7l8 4 8-4-8-4Z", "path M4 12l8 4 8-4", "path M4 17l8 4 8-4"];
+    case "document":
+      return ["rect 5 3 14 18 2", "path M9 8h6", "path M9 12h6", "path M9 16h4"];
+    case "terminal":
+      return ["rect 3 4 18 16 2", "path M8 9 11 12 8 15", "path M13 15h3"];
+    case "dataset":
+      return [
+        "ellipse 12 5 7 3",
+        "path M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5",
+        "path M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6",
+      ];
+    case "grid":
+      return ["rect 4 4 7 7 1.5", "rect 13 4 7 7 1.5", "rect 4 13 7 7 1.5", "rect 13 13 7 7 1.5"];
+    default:
+      return ["path M12 3 14.8 8.2 20 11l-5.2 2.8L12 19l-2.8-5.2L4 11l5.2-2.8L12 3Z"];
+  }
+});
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    viewBox="0 0 24 24"
+    width="20"
+    height="20"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.8"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <template v-for="segment in pathData" :key="segment">
+      <circle
+        v-if="segment.startsWith('circle ')"
+        :cx="segment.split(' ')[1]"
+        :cy="segment.split(' ')[2]"
+        :r="segment.split(' ')[3]"
+      />
+      <ellipse
+        v-else-if="segment.startsWith('ellipse ')"
+        :cx="segment.split(' ')[1]"
+        :cy="segment.split(' ')[2]"
+        :rx="segment.split(' ')[3]"
+        :ry="segment.split(' ')[4]"
+      />
+      <rect
+        v-else-if="segment.startsWith('rect ')"
+        :x="segment.split(' ')[1]"
+        :y="segment.split(' ')[2]"
+        :width="segment.split(' ')[3]"
+        :height="segment.split(' ')[4]"
+        :rx="segment.split(' ')[5]"
+      />
+      <path v-else :d="segment.replace(/^path /, '')" />
+    </template>
+  </svg>
+</template>

package/packages/ui/src/patterns/LandingPage/LandingPage.spec.md

@@ -0,0 +1,24 @@
+# LandingPage
+
+Config-driven marketing landing page built from ternent-ui primitives and patterns.
+
+## Purpose
+
+- keep scaffolded apps on-brand with a full landing-page skeleton
+- render declarative copy, previews, and calls to action from generated config
+- avoid app-specific logic in the shared renderer
+
+## Inputs
+
+- navigation links
+- hero copy and preview panel
+- feature, how-it-works, and use-case content
+- developer tabs with snippets
+- clarifier lists
+- CTA and footer links
+
+## Non-goals
+
+- custom business components
+- runtime YAML parsing
+- bespoke preview hooks per app

package/packages/ui/src/patterns/LandingPage/LandingPage.types.ts

@@ -0,0 +1,212 @@
+export const landingPageToneValues = ["primary", "secondary", "accent", "success", "info"] as const;
+
+export const landingPageValueToneValues = [
+  "neutral",
+  "primary",
+  "secondary",
+  "accent",
+  "success",
+  "warning",
+  "info",
+  "critical",
+] as const;
+
+export const landingPageActionVariantValues = ["primary", "secondary"] as const;
+
+export const landingPageIconValues = [
+  "globe",
+  "pin",
+  "shield",
+  "check",
+  "stack",
+  "document",
+  "terminal",
+  "spark",
+  "dataset",
+  "grid",
+] as const;
+
+export type LandingPageTone = (typeof landingPageToneValues)[number];
+export type LandingPageValueTone = (typeof landingPageValueToneValues)[number];
+export type LandingPageActionVariant = (typeof landingPageActionVariantValues)[number];
+export type LandingPageIcon = (typeof landingPageIconValues)[number];
+
+export type LandingPageLink = {
+  href: string;
+  label: string;
+};
+
+export type LandingPageAction = LandingPageLink & {
+  variant?: LandingPageActionVariant;
+};
+
+export type LandingPageTertiaryAction = LandingPageLink;
+
+export type LandingPagePreviewTab = {
+  label: string;
+  active?: boolean;
+};
+
+export type LandingPagePreviewRow = {
+  label: string;
+  value: string;
+  valueTone?: LandingPageValueTone;
+};
+
+export type LandingPagePreview = {
+  title?: string;
+  meta?: string;
+  statusLabel?: string;
+  statusTone?: LandingPageValueTone;
+  rows?: readonly LandingPagePreviewRow[];
+  code?: string;
+  tabs?: readonly LandingPagePreviewTab[];
+  footerText?: string;
+};
+
+export type LandingPageFeature = {
+  title: string;
+  description: string;
+  tone?: LandingPageTone;
+  icon?: LandingPageIcon;
+};
+
+export type LandingPageStep = {
+  title: string;
+  description: string;
+};
+
+export type LandingPageNarrativeItem = {
+  title: string;
+  description: string;
+};
+
+export type LandingPageDeveloperTab = {
+  value: string;
+  label: string;
+  title: string;
+  meta: string;
+  code: string;
+  supportingCopy: string;
+  link: LandingPageLink;
+};
+
+export type LandingPageClarifierColumn = {
+  title: string;
+  items: readonly string[];
+};
+
+export type LandingPageProofModelSection = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  items: readonly LandingPageNarrativeItem[];
+};
+
+export type LandingPageProofJsonSection = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  code: string;
+  supportingText?: string;
+};
+
+export type LandingPageSurfacesSection = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  items: readonly LandingPageFeature[];
+};
+
+export type LandingPageStaticBuildSection = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  steps: readonly LandingPageStep[];
+  closingLine?: string;
+  primaryAction?: LandingPageAction;
+  secondaryAction?: LandingPageAction;
+};
+
+export type LandingPageSuiteSection = {
+  eyebrow: string;
+  title: string;
+  description: string;
+  supportingText?: string;
+  items: readonly {
+    title: string;
+    description: string;
+    themeColor: string;
+    link: LandingPageLink;
+  }[];
+};
+
+export type LandingPageNonGoalsSection = {
+  eyebrow?: string;
+  title: string;
+  items: readonly string[];
+};
+
+export type LandingPageConfig = {
+  navigationLinks: readonly LandingPageLink[];
+  hero: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    supportingLine?: string;
+    note?: string;
+    primaryAction: LandingPageAction;
+    secondaryAction?: LandingPageAction;
+    tertiaryAction?: LandingPageTertiaryAction;
+    preview: LandingPagePreview;
+  };
+  proofModelSection?: LandingPageProofModelSection;
+  proofJsonSection?: LandingPageProofJsonSection;
+  surfacesSection?: LandingPageSurfacesSection;
+  staticBuildSection?: LandingPageStaticBuildSection;
+  featureSection?: {
+    eyebrow: string;
+    title: string;
+    description?: string;
+    items: readonly LandingPageFeature[];
+  };
+  howItWorksSection?: {
+    eyebrow: string;
+    title: string;
+    preview: LandingPagePreview;
+    steps: readonly LandingPageStep[];
+  };
+  useCasesSection?: {
+    eyebrow: string;
+    title: string;
+    items: readonly LandingPageFeature[];
+  };
+  developerSection: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    surfaces: readonly string[];
+    tabs: readonly LandingPageDeveloperTab[];
+  };
+  clarifierSection?: {
+    eyebrow: string;
+    title: string;
+    columns: readonly LandingPageClarifierColumn[];
+  };
+  suiteSection?: LandingPageSuiteSection;
+  nonGoalsSection?: LandingPageNonGoalsSection;
+  ctaSection: {
+    eyebrow: string;
+    title: string;
+    description: string;
+    primaryAction: LandingPageAction;
+    secondaryAction?: LandingPageAction;
+    tertiaryAction?: LandingPageTertiaryAction;
+  };
+  footer?: {
+    brandLabel: string;
+    brandHref?: string;
+    copyright: string;
+    links: readonly LandingPageLink[];
+  };
+};