@oneie/plugin-pages 0.1.0

package/LICENSE

@@ -0,0 +1,86 @@
+# ONE License (Version 1.0)
+
+Copyright (c) 2024-2026 one.ie
+
+## Maximum Freedom, One Obligation
+
+This license empowers you with complete commercial freedom to use, reuse, modify, sell and resell the software, AI and data, at any price you wish.
+
+No usage limits. No royalty fees. Just pure, unrestricted ability to innovate and profit from the software.
+
+You are free to run ONE locally, on your own servers, in the cloud and at the edge.
+
+## You Receive
+
+### Unlimited Rights
+
+You have unrestricted rights to use, modify, license, sublicense, distribute, sell, resell and monetize the Software without restrictions, subject only to the Brand Requirement below.
+
+### Permitted Actions
+
+Including, but not limited to:
+
+- Commercial use and integration into any systems
+- Creation and sale of derivative works
+- Providing software as a service
+- AI training and content generation
+- Patenting innovations based on the Software
+- Open source applications and integrations
+
+### License Compatibility
+
+This license is compatible with all major open-source licenses, including:
+
+- MIT License
+- Apache License
+- GNU General Public License (GPL)
+- BSD Licenses
+- Mozilla Public License
+
+### Perpetual Rights
+
+These rights are granted in perpetuity and are irrevocable, provided the Brand Requirement is maintained.
+
+## Intellectual Property
+
+- We retain ownership of the original Software and data.
+- You own any modifications you make.
+- You never have to share your code or data.
+
+## Brand Requirement
+
+The only obligation is:
+
+- Don't remove the ONE brand, logo, and link to https://one.ie/ from the deployed product.
+
+To remove the Brand Requirement — white-label, no visible ONE branding — obtain the
+**ONE Enterprise License** (see `LICENSE-ENTERPRISE.md` or contact agent@one.ie).
+
+## Liability and Warranty
+
+The Software and data is provided "AS IS". We bear no liability for its use.
+
+## Termination
+
+This license terminates if you remove or hide the ONE brand, logo, or link without
+holding a current ONE Enterprise License.
+
+## Governing Law and Disputes
+
+This license is governed by the laws of Ireland. The parties will attempt to resolve disputes through good-faith negotiation. If necessary, disputes will proceed to mediation under the Mediators' Institute of Ireland rules, and then to binding arbitration under the Arbitration Act 2010, seated in Dublin, conducted in English.
+
+---
+
+This license is designed to maximize freedom to innovate and profit. There is no copyleft requirement to share any code, making it suitable for enterprise use.
+
+## Enterprise Solutions
+
+Building something big? We're here to help:
+
+- **Free** — use every feature with the ONE brand link in the footer
+- **White-label** — remove the brand requirement (ONE Enterprise License)
+- **Custom** — white-label solutions tailored to your needs
+- **Enterprise** — full support and deployment assistance
+- **Training** — help getting your team started
+
+Contact agent@one.ie to share your needs · Learn at https://one.ie/learn · Agents: https://one.ie/llms.txt

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@oneie/plugin-pages",
+  "version": "0.1.0",
+  "description": "ONE pages — renders a workspace's published Puck pages on any Astro site via the public pages:view receiver",
+  "license": "SEE LICENSE IN LICENSE",
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./PageRenderer.tsx": "./src/PageRenderer.tsx",
+    "./fetchPage.ts": "./src/fetchPage.ts",
+    "./PageRoute.astro": "./src/PageRoute.astro"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "radix-ui": "^1.6.2",
+    "tailwind-merge": "^3.5.0"
+  },
+  "peerDependencies": {
+    "astro": ">=6.0.0",
+    "@oneie/frontend": ">=0.1.0",
+    "@puckeditor/core": ">=0.21.0",
+    "react": ">=19.0.0"
+  }
+}

package/src/PageRenderer.tsx

@@ -0,0 +1,17 @@
+// SSR-safe render of a published Puck Data tree. Ported from
+// one.ie/web/src/components/puck/PuckRenderer.tsx — same guard, same <Render>, but
+// bound to the package's self-contained pagesPuckConfig instead of the workspace
+// config. No puck.css / editor-chrome import (keeps it out of any SSR bundle).
+import { Render, type Data } from '@puckeditor/core'
+import { pagesPuckConfig } from './config'
+
+export type PuckData = Data
+
+export interface PageRendererProps {
+  data: PuckData
+}
+
+export function PageRenderer({ data }: PageRendererProps) {
+  if (!data || !data.content || data.content.length === 0) return null
+  return <Render config={pagesPuckConfig} data={data} />
+}

package/src/PageRoute.astro

@@ -0,0 +1,17 @@
+---
+// Default injected entrypoint for the /p/[slug] route. Self-resolves the page slug
+// from Astro.params and the workspace from env; renders the published Puck tree.
+// apps/one/site (C2) sets injectRoutes:false and wraps <PageRenderer> in its own
+// <Layout> instead of using this file.
+import { PageRenderer } from './PageRenderer'
+import { fetchPage } from './fetchPage'
+
+const { slug } = Astro.params as { slug: string }
+const ws = import.meta.env.ONE_WS ?? import.meta.env.PUBLIC_ONE_WS ?? ''
+const baseUrl = import.meta.env.ONE_BASE_URL as string | undefined
+const apiKey = import.meta.env.ONE_API_KEY as string | undefined
+
+const data = ws ? await fetchPage(ws, slug, { baseUrl, apiKey }) : null
+if (!data) return new Response(null, { status: 404 })
+---
+<PageRenderer data={data} client:only="react" />

package/src/components/FAQSection.tsx

@@ -0,0 +1,64 @@
+// Ported verbatim from one.ie/web/src/components/cro/FAQSection.tsx
+import { useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { emitClick } from '../lib/ui-signal'
+
+const BRAND_TOKENS = new Set(['primary', 'secondary', 'tertiary'])
+
+interface FAQ {
+  q: string
+  a: string
+}
+
+interface FAQSectionProps {
+  title?: string
+  faqs: FAQ[]
+  bgToken?: string
+}
+
+export function FAQSection({ title = 'Common questions', faqs, bgToken }: FAQSectionProps) {
+  const [open, setOpen] = useState<number | null>(null)
+
+  const hasBgToken = !!bgToken && bgToken !== 'none'
+  const isBrandToken = hasBgToken && BRAND_TOKENS.has(bgToken)
+
+  return (
+    <section
+      className={`px-6 py-24 ${hasBgToken ? '' : 'bg-foreground/30'}${isBrandToken ? ' text-on-primary' : ''}`}
+      style={hasBgToken ? { backgroundColor: `var(--color-${bgToken})` } : undefined}
+    >
+      <div className="max-w-3xl mx-auto">
+        <h2 className="text-3xl font-bold tracking-tight text-center mb-14">{title}</h2>
+        <div className="flex flex-col gap-2">
+          {faqs.map((faq, i) => (
+            <article
+              key={faq.q}
+              className="bg-background rounded-xl border overflow-hidden"
+              style={{ borderColor: 'var(--color-border)' }}
+            >
+              <button
+                className="w-full flex items-center justify-between gap-4 px-6 py-5 text-left hover:bg-foreground/30 transition-colors"
+                onClick={() => {
+                  const next = open === i ? null : i
+                  setOpen(next)
+                  if (next !== null) emitClick('ui:faq:open', { question: faq.q })
+                }}
+              >
+                <span className="font-medium text-sm text-font">{faq.q}</span>
+                <ChevronDown
+                  size={18}
+                  className={`text-font/40 flex-shrink-0 transition-transform ${open === i ? 'rotate-180' : ''}`}
+                />
+              </button>
+              {open === i && (
+                <div className="px-6 pb-5 border-t" style={{ borderColor: 'var(--color-border)' }}>
+                  <p className="text-sm text-font/60 leading-relaxed pt-4">{faq.a}</p>
+                </div>
+              )}
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/FooterSection.tsx

@@ -0,0 +1,72 @@
+// Ported from one.ie/web/src/components/cro/FooterSection.tsx — hrefs additionally
+// wrapped in safeHref() (see ../lib/safe-url.ts): public, no-login render surface.
+import { AtSign, Globe, MessageCircle, Share2 } from 'lucide-react'
+import { Separator } from './Separator'
+import { safeHref } from '../lib/safe-url'
+
+export interface FooterLink {
+  label: string
+  href: string
+}
+
+export interface FooterSocial {
+  platform: 'facebook' | 'instagram' | 'twitter' | 'youtube'
+  href: string
+}
+
+export interface FooterSectionProps {
+  brand?: string
+  links?: FooterLink[]
+  socials?: FooterSocial[]
+  copyright?: string
+}
+
+// lucide dropped brand glyphs (Facebook/Twitter/…); map platforms to generic icons.
+const ICONS = {
+  facebook: Globe,
+  instagram: AtSign,
+  twitter: MessageCircle,
+  youtube: Share2,
+} as const
+
+export function FooterSection({
+  brand = 'ONE',
+  links = [],
+  socials = [],
+  copyright = `©${new Date().getFullYear()} ONE, Made for better web.`,
+}: FooterSectionProps) {
+  return (
+    <footer>
+      <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-4 max-md:flex-col sm:px-6 sm:py-6 md:gap-6 md:py-8">
+        <a href="#" className="flex items-center gap-3 font-semibold text-lg">
+          {brand}
+        </a>
+
+        <nav className="flex items-center gap-5 whitespace-nowrap">
+          {links.map((link, i) => (
+            <a key={i} href={safeHref(link.href) ?? '#'} className="hover:underline">
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-4">
+          {socials.map((social, i) => {
+            const IconCmp = ICONS[social.platform] ?? Globe
+            return (
+              <a key={i} href={safeHref(social.href) ?? '#'} aria-label={social.platform}>
+                <IconCmp className="size-5" />
+              </a>
+            )
+          })}
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="mx-auto flex max-w-7xl justify-center px-4 py-8 sm:px-6">
+        <p className="text-center font-medium text-balance">{copyright}</p>
+      </div>
+    </footer>
+  )
+}

package/src/components/HowItWorks.tsx

@@ -0,0 +1,56 @@
+// Ported verbatim from one.ie/web/src/components/cro/HowItWorks.tsx
+const BRAND_TOKENS = new Set(['primary', 'secondary', 'tertiary'])
+
+interface Step {
+  label: string
+  description: string
+  detail?: string
+}
+
+interface HowItWorksProps {
+  title?: string
+  subtitle?: string
+  steps: Step[]
+  bgToken?: string
+}
+
+export function HowItWorks({ title = 'How it works', subtitle, steps, bgToken }: HowItWorksProps) {
+  const hasBgToken = !!bgToken && bgToken !== 'none'
+  const isBrandToken = hasBgToken && BRAND_TOKENS.has(bgToken)
+
+  return (
+    <section
+      className={`px-6 py-24${isBrandToken ? ' text-on-primary' : ''}`}
+      style={hasBgToken ? { backgroundColor: `var(--color-${bgToken})` } : undefined}
+    >
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-3xl font-bold tracking-tight text-center mb-3">{title}</h2>
+        {subtitle && <p className="text-font/60 text-center mb-16 max-w-xl mx-auto">{subtitle}</p>}
+        {!subtitle && <div className="mb-16" />}
+
+        <div className="relative">
+          {steps.length > 1 && (
+            <div
+              className="absolute left-6 top-8 bottom-8 w-px hidden md:block"
+              style={{ background: 'var(--color-border)' }}
+            />
+          )}
+          <div className="flex flex-col gap-10">
+            {steps.map((step, i) => (
+              <div key={step.label} className="flex gap-6 md:gap-10 items-start">
+                <div className="flex-shrink-0 w-12 h-12 rounded-full bg-primary text-on-primary flex items-center justify-center font-bold text-lg relative z-10">
+                  {i + 1}
+                </div>
+                <div className="pt-2">
+                  <h3 className="font-semibold text-base mb-1">{step.label}</h3>
+                  <p className="text-font/60 text-sm leading-relaxed">{step.description}</p>
+                  {step.detail && <p className="text-font/40 text-xs mt-2 font-mono">{step.detail}</p>}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/Icon.tsx

@@ -0,0 +1,25 @@
+// Ported verbatim from one.ie/web/src/components/ui/Icon.tsx
+import type { LucideIcon } from 'lucide-react'
+
+export type IconSize = 'sm' | 'md' | 'lg' | 'xl'
+
+const SIZE: Record<IconSize, number> = { sm: 14, md: 16, lg: 20, xl: 24 }
+
+interface IconProps {
+  icon: LucideIcon
+  size?: IconSize
+  className?: string
+  'aria-label'?: string
+}
+
+export function Icon({ icon: I, size = 'md', className, 'aria-label': label }: IconProps) {
+  return (
+    <I
+      size={SIZE[size]}
+      strokeWidth={1.5}
+      className={className}
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+    />
+  )
+}

package/src/components/IconBadge.tsx

@@ -0,0 +1,62 @@
+// Ported verbatim from one.ie/web/src/components/ui/IconBadge.tsx
+import type { LucideIcon } from 'lucide-react'
+
+export type IconBadgeTone = 'primary' | 'secondary' | 'tertiary' | 'neutral'
+export type IconBadgeSize = 'sm' | 'md' | 'lg'
+
+const BOX: Record<IconBadgeSize, string> = {
+  sm: 'w-9 h-9',
+  md: 'w-11 h-11',
+  lg: 'w-14 h-14',
+}
+const PX: Record<IconBadgeSize, number> = { sm: 16, md: 20, lg: 24 }
+
+interface ToneStyle {
+  background: string
+  borderColor: string
+  color: string
+}
+
+const tone = (name: 'primary' | 'secondary' | 'tertiary'): ToneStyle => ({
+  background: `color-mix(in oklab, var(--color-${name}) 14%, var(--color-foreground))`,
+  borderColor: `color-mix(in oklab, var(--color-${name}) 28%, var(--color-border))`,
+  color: `var(--color-${name})`,
+})
+
+const TONE: Record<IconBadgeTone, ToneStyle> = {
+  primary: tone('primary'),
+  secondary: tone('secondary'),
+  tertiary: tone('tertiary'),
+  neutral: {
+    background: 'var(--color-foreground)',
+    borderColor: 'var(--color-border)',
+    color: 'var(--color-font)',
+  },
+}
+
+interface Props {
+  icon: LucideIcon
+  tone?: IconBadgeTone
+  size?: IconBadgeSize
+  className?: string
+  'aria-label'?: string
+}
+
+export function IconBadge({
+  icon: I,
+  tone: t = 'tertiary',
+  size = 'md',
+  className = '',
+  'aria-label': label,
+}: Props) {
+  return (
+    <div
+      className={`${BOX[size]} flex-shrink-0 inline-flex items-center justify-center rounded-xl border ${className}`}
+      style={TONE[t]}
+      aria-hidden={label ? undefined : true}
+      aria-label={label}
+    >
+      <I size={PX[size]} strokeWidth={1.75} />
+    </div>
+  )
+}

package/src/components/LandingFeatures.tsx

@@ -0,0 +1,61 @@
+// Ported verbatim from one.ie/web/src/components/cro/LandingFeatures.tsx
+import type { LucideIcon } from 'lucide-react'
+import { IconBadge, type IconBadgeTone } from './IconBadge'
+
+const BRAND_TOKENS = new Set(['primary', 'secondary', 'tertiary'])
+
+export interface LandingFeature {
+  headline: string
+  body: string
+  icon?: LucideIcon
+  tone?: IconBadgeTone
+}
+
+interface LandingFeaturesProps {
+  title?: string
+  subtitle?: string
+  features: LandingFeature[]
+  columns?: 2 | 3
+  bgToken?: string
+}
+
+export function LandingFeatures({
+  title = 'What you get',
+  subtitle,
+  features,
+  columns = 3,
+  bgToken,
+}: LandingFeaturesProps) {
+  const hasBgToken = !!bgToken && bgToken !== 'none'
+  const isBrandToken = hasBgToken && BRAND_TOKENS.has(bgToken)
+
+  const gridClass = columns === 2 ? 'grid sm:grid-cols-2 gap-8' : 'grid sm:grid-cols-2 lg:grid-cols-3 gap-8'
+
+  return (
+    <section
+      className={`px-6 py-24 ${hasBgToken ? '' : 'bg-foreground/30'}${isBrandToken ? ' text-on-primary' : ''}`}
+      style={hasBgToken ? { backgroundColor: `var(--color-${bgToken})` } : undefined}
+    >
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold tracking-tight text-center mb-3">{title}</h2>
+        {subtitle && <p className="text-font/60 text-center mb-14 max-w-xl mx-auto">{subtitle}</p>}
+        {!subtitle && <div className="mb-14" />}
+        <div className={gridClass}>
+          {features.map((f) => (
+            <article
+              key={f.headline}
+              className="bg-background rounded-2xl p-6 border flex flex-col gap-4"
+              style={{ borderColor: 'var(--color-border)', boxShadow: 'var(--shadow-card)' }}
+            >
+              {f.icon && <IconBadge icon={f.icon} tone={f.tone ?? 'primary'} size="md" />}
+              <div>
+                <h3 className="font-semibold text-base mb-2">{f.headline}</h3>
+                <p className="text-sm text-font/60 leading-relaxed">{f.body}</p>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/LandingHero.tsx

@@ -0,0 +1,113 @@
+// Ported from one.ie/web/src/components/cro/LandingHero.tsx — hrefs additionally
+// wrapped in safeHref() (see ../lib/safe-url.ts): this package renders to public,
+// no-login visitors on any external site, so an unsanitized javascript:/data:
+// URL in stored page content would execute in every visitor's browser.
+import { ArrowRight } from 'lucide-react'
+import { Icon } from './Icon'
+import { emitClick } from '../lib/ui-signal'
+import { safeHref } from '../lib/safe-url'
+
+const BRAND_TOKENS = new Set(['primary', 'secondary', 'tertiary'])
+
+interface CTA {
+  label: string
+  href: string
+}
+
+interface LandingHeroProps {
+  eyebrow?: string
+  headline: string
+  highlight?: string
+  subhead: string
+  primaryCta: CTA
+  secondaryCta?: CTA
+  frictionText?: string
+  visual?: string
+  bgToken?: string
+}
+
+export function LandingHero({
+  eyebrow,
+  headline,
+  highlight,
+  subhead,
+  primaryCta,
+  secondaryCta,
+  frictionText = 'No credit card · 2-minute setup',
+  visual,
+  bgToken,
+}: LandingHeroProps) {
+  const hasBgToken = !!bgToken && bgToken !== 'none'
+  const isBrandToken = hasBgToken && BRAND_TOKENS.has(bgToken)
+
+  return (
+    <section
+      className={`px-6 pt-24 pb-20 md:pt-32 md:pb-28${isBrandToken ? ' text-on-primary' : ''}`}
+      style={hasBgToken ? { backgroundColor: `var(--color-${bgToken})` } : undefined}
+    >
+      <div className="max-w-4xl mx-auto text-center">
+        {eyebrow && (
+          <p
+            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-foreground border text-xs font-medium text-font/60 mb-8 tracking-wide uppercase"
+            style={{ borderColor: 'var(--color-border)' }}
+          >
+            {eyebrow}
+          </p>
+        )}
+
+        <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-6 leading-[0.96]">
+          {headline}
+          {highlight && (
+            <>
+              {' '}
+              <span className="text-tertiary">{highlight}</span>
+            </>
+          )}
+        </h1>
+
+        <p className="text-xl sm:text-2xl text-font/60 mb-10 max-w-2xl mx-auto leading-snug">
+          {subhead}
+        </p>
+
+        <div className="flex flex-col sm:flex-row gap-3 justify-center mb-4">
+          <a
+            href={safeHref(primaryCta.href) ?? '#'}
+            onClick={() => emitClick('ui:landing:primary-cta', { page: headline })}
+            className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-primary text-on-primary rounded-full font-medium text-base hover:brightness-110 transition"
+          >
+            {primaryCta.label}
+            <Icon icon={ArrowRight} size="md" />
+          </a>
+          {secondaryCta && (
+            <a
+              href={safeHref(secondaryCta.href) ?? '#'}
+              onClick={() => emitClick('ui:landing:secondary-cta', { page: headline })}
+              className="inline-flex items-center justify-center gap-2 px-8 py-4 text-font rounded-full font-medium text-base hover:text-font/70 transition border"
+              style={{ borderColor: 'var(--color-border)' }}
+            >
+              {secondaryCta.label}
+            </a>
+          )}
+        </div>
+
+        {frictionText && <p className="text-sm text-font/40">{frictionText}</p>}
+
+        {visual && (
+          <div className="mt-14 mx-auto max-w-3xl">
+            <div
+              className="bg-foreground rounded-2xl border overflow-hidden"
+              style={{ borderColor: 'var(--color-border)', boxShadow: 'var(--shadow-pop)' }}
+            >
+              <div className="flex items-center gap-1.5 px-4 py-3 border-b" style={{ borderColor: 'var(--color-border)' }}>
+                <span className="w-3 h-3 rounded-full bg-destructive/40" />
+                <span className="w-3 h-3 rounded-full bg-tertiary/40" />
+                <span className="w-3 h-3 rounded-full bg-primary/40" />
+              </div>
+              <div className="px-6 py-8 text-sm text-font/50 italic text-left">{visual}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/components/PricingSection.tsx

@@ -0,0 +1,120 @@
+// Ported from one.ie/web/src/components/cro/PricingSection.tsx — hrefs additionally
+// wrapped in safeHref() (see ../lib/safe-url.ts): public, no-login render surface.
+import { Check } from 'lucide-react'
+import { useState } from 'react'
+import { emitClick } from '../lib/ui-signal'
+import { safeHref } from '../lib/safe-url'
+
+export interface PricingTier {
+  name: string
+  monthlyPrice: string
+  annualPrice: string
+  description: string
+  features: string[]
+  cta: string
+  ctaHref: string
+  popular?: boolean
+  enterprise?: boolean
+}
+
+interface PricingSectionProps {
+  title?: string
+  subtitle?: string
+  tiers: PricingTier[]
+}
+
+export function PricingSection({
+  title = 'Simple pricing',
+  subtitle = 'Annual billing pre-selected saves you 20%.',
+  tiers,
+}: PricingSectionProps) {
+  const [annual, setAnnual] = useState(true)
+
+  return (
+    <section className="px-6 py-24 bg-foreground/30">
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold tracking-tight text-center mb-3">{title}</h2>
+        <p className="text-font/60 text-center mb-10 max-w-xl mx-auto">{subtitle}</p>
+
+        <div className="flex justify-center mb-12">
+          <div
+            className="inline-flex items-center gap-1 bg-background border rounded-full p-1"
+            style={{ borderColor: 'var(--color-border)' }}
+          >
+            <button
+              onClick={() => {
+                setAnnual(true)
+                emitClick('ui:pricing:annual')
+              }}
+              className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${annual ? 'bg-primary text-on-primary' : 'text-font/60 hover:text-font'}`}
+            >
+              Annual <span className="text-xs opacity-70 ml-1">save 20%</span>
+            </button>
+            <button
+              onClick={() => {
+                setAnnual(false)
+                emitClick('ui:pricing:monthly')
+              }}
+              className={`px-4 py-1.5 rounded-full text-sm font-medium transition-colors ${!annual ? 'bg-primary text-on-primary' : 'text-font/60 hover:text-font'}`}
+            >
+              Monthly
+            </button>
+          </div>
+        </div>
+
+        <div className="grid sm:grid-cols-3 gap-6 items-start">
+          {tiers.map((tier) => (
+            <article
+              key={tier.name}
+              className={`bg-background rounded-2xl border flex flex-col relative overflow-hidden ${tier.popular ? 'ring-2 ring-primary' : ''}`}
+              style={{
+                borderColor: tier.popular ? 'var(--color-primary)' : 'var(--color-border)',
+                boxShadow: 'var(--shadow-card)',
+              }}
+            >
+              {tier.popular && (
+                <div className="absolute top-0 inset-x-0 bg-primary text-on-primary text-xs font-semibold text-center py-1.5 tracking-wide uppercase">
+                  Most popular
+                </div>
+              )}
+
+              <header
+                className={`px-6 ${tier.popular ? 'pt-10' : 'pt-6'} pb-6 border-b`}
+                style={{ borderColor: 'var(--color-border)' }}
+              >
+                <h3 className="font-bold text-lg mb-1">{tier.name}</h3>
+                <p className="text-font/50 text-sm mb-4">{tier.description}</p>
+                <div className="flex items-baseline gap-1">
+                  <span className="text-4xl font-bold">{annual ? tier.annualPrice : tier.monthlyPrice}</span>
+                  {!tier.enterprise && <span className="text-font/40 text-sm">/mo</span>}
+                </div>
+              </header>
+
+              <div className="px-6 py-6 flex flex-col gap-3 flex-1">
+                {(tier.features ?? []).map((f) => (
+                  <div key={f} className="flex gap-2.5 items-start">
+                    <Check size={15} className="text-tertiary flex-shrink-0 mt-0.5" />
+                    <span className="text-sm text-font/70">{f}</span>
+                  </div>
+                ))}
+              </div>
+
+              <div className="px-6 pb-6">
+                <a
+                  href={safeHref(tier.ctaHref) ?? '#'}
+                  onClick={() => emitClick('ui:pricing:tier-cta', { tier: tier.name })}
+                  className={`w-full inline-flex items-center justify-center py-3 px-6 rounded-xl font-medium text-sm transition ${
+                    tier.popular ? 'bg-primary text-on-primary hover:brightness-110' : 'bg-foreground text-font hover:bg-foreground/80 border'
+                  }`}
+                  style={!tier.popular ? { borderColor: 'var(--color-border)' } : {}}
+                >
+                  {tier.cta}
+                </a>
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/ProofBar.tsx

@@ -0,0 +1,56 @@
+// Ported verbatim from one.ie/web/src/components/cro/ProofBar.tsx
+const BRAND_TOKENS = new Set(['primary', 'secondary', 'tertiary'])
+
+interface Stat {
+  label: string
+  value: string
+  source?: string
+}
+
+interface NamedQuote {
+  quote: string
+  name: string
+  role: string
+  company: string
+}
+
+interface ProofBarProps {
+  stats?: Stat[]
+  leadQuote?: NamedQuote
+  bgToken?: string
+}
+
+export function ProofBar({ stats, leadQuote, bgToken }: ProofBarProps) {
+  const hasBgToken = !!bgToken && bgToken !== 'none'
+  const isBrandToken = hasBgToken && BRAND_TOKENS.has(bgToken)
+
+  return (
+    <section
+      className={`px-6 py-12 border-y${isBrandToken ? ' text-on-primary' : ''}`}
+      style={{ borderColor: 'var(--color-border)', ...(hasBgToken ? { backgroundColor: `var(--color-${bgToken})` } : {}) }}
+    >
+      <div className="max-w-5xl mx-auto">
+        {stats && stats.length > 0 && (
+          <div className="flex flex-wrap justify-center gap-10 mb-8">
+            {stats.map((s) => (
+              <div key={s.label} className="text-center">
+                <p className="text-3xl font-bold text-font">{s.value}</p>
+                <p className="text-xs text-font/50 mt-1">{s.label}</p>
+                {s.source && <p className="text-xs text-font/30">{s.source}</p>}
+              </div>
+            ))}
+          </div>
+        )}
+        {leadQuote && (
+          <blockquote className="max-w-2xl mx-auto text-center">
+            <p className="text-font/70 text-base italic leading-relaxed">&quot;{leadQuote.quote}&quot;</p>
+            <footer className="mt-3">
+              <span className="text-sm font-semibold text-font">{leadQuote.name}</span>
+              <span className="text-sm text-font/50"> · {leadQuote.role} · {leadQuote.company}</span>
+            </footer>
+          </blockquote>
+        )}
+      </div>
+    </section>
+  )
+}

package/src/components/SecondaryCTA.tsx

@@ -0,0 +1,62 @@
+// Ported from one.ie/web/src/components/cro/SecondaryCTA.tsx — hrefs additionally
+// wrapped in safeHref() (see ../lib/safe-url.ts): public, no-login render surface.
+import { ArrowRight } from 'lucide-react'
+import { Icon } from './Icon'
+import { emitClick } from '../lib/ui-signal'
+import { safeHref } from '../lib/safe-url'
+
+const BRAND_TOKENS = new Set(['primary', 'secondary', 'tertiary'])
+
+interface SecondaryCTAProps {
+  headline: string
+  subhead?: string
+  primaryCta: { label: string; href: string }
+  secondaryCta?: { label: string; href: string }
+  frictionText?: string
+  bgToken?: string
+}
+
+export function SecondaryCTA({
+  headline,
+  subhead,
+  primaryCta,
+  secondaryCta,
+  frictionText = 'No credit card · 2-minute setup',
+  bgToken,
+}: SecondaryCTAProps) {
+  const hasBgToken = !!bgToken && bgToken !== 'none'
+  const isBrandToken = hasBgToken && BRAND_TOKENS.has(bgToken)
+
+  return (
+    <section
+      className={`px-6 py-24${isBrandToken ? ' text-on-primary' : ''}`}
+      style={hasBgToken ? { backgroundColor: `var(--color-${bgToken})` } : undefined}
+    >
+      <div className="max-w-2xl mx-auto text-center">
+        <h2 className="text-3xl font-bold tracking-tight mb-4">{headline}</h2>
+        {subhead && <p className="text-font/60 mb-10 text-lg leading-snug">{subhead}</p>}
+        {!subhead && <div className="mb-10" />}
+        <div className="flex flex-col sm:flex-row gap-3 justify-center mb-4">
+          <a
+            href={safeHref(primaryCta.href) ?? '#'}
+            onClick={() => emitClick('ui:landing:secondary-cta', { section: 'bottom-cta' })}
+            className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-primary text-on-primary rounded-full font-medium text-base hover:brightness-110 transition"
+          >
+            {primaryCta.label}
+            <Icon icon={ArrowRight} size="md" />
+          </a>
+          {secondaryCta && (
+            <a
+              href={safeHref(secondaryCta.href) ?? '#'}
+              className="inline-flex items-center justify-center gap-2 px-8 py-4 text-font rounded-full font-medium text-base hover:text-font/70 transition border"
+              style={{ borderColor: 'var(--color-border)' }}
+            >
+              {secondaryCta.label}
+            </a>
+          )}
+        </div>
+        {frictionText && <p className="text-sm text-font/40">{frictionText}</p>}
+      </div>
+    </section>
+  )
+}

package/src/components/Separator.tsx

@@ -0,0 +1,27 @@
+// Ported verbatim from one.ie/web/src/components/ui/separator.tsx
+import * as React from 'react'
+import { Separator as SeparatorPrimitive } from 'radix-ui'
+
+import { cn } from '../lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/components/Testimonials.tsx

@@ -0,0 +1,48 @@
+// Ported verbatim from one.ie/web/src/components/cro/Testimonials.tsx
+const BRAND_TOKENS = new Set(['primary', 'secondary', 'tertiary'])
+
+interface Testimonial {
+  quote: string
+  name: string
+  role: string
+  company: string
+}
+
+interface TestimonialsProps {
+  title?: string
+  testimonials: Testimonial[]
+  bgToken?: string
+}
+
+export function Testimonials({ title = 'What agencies say', testimonials, bgToken }: TestimonialsProps) {
+  const hasBgToken = !!bgToken && bgToken !== 'none'
+  const isBrandToken = hasBgToken && BRAND_TOKENS.has(bgToken)
+
+  return (
+    <section
+      className={`px-6 py-24${isBrandToken ? ' text-on-primary' : ''}`}
+      style={hasBgToken ? { backgroundColor: `var(--color-${bgToken})` } : undefined}
+    >
+      <div className="max-w-5xl mx-auto">
+        <h2 className="text-3xl font-bold tracking-tight text-center mb-14">{title}</h2>
+        <div className="grid sm:grid-cols-3 gap-6">
+          {testimonials.map((t) => (
+            <blockquote
+              key={t.name}
+              className="bg-foreground rounded-2xl p-6 border flex flex-col gap-4"
+              style={{ borderColor: 'var(--color-border)', boxShadow: 'var(--shadow-card)' }}
+            >
+              <p className="text-sm leading-relaxed text-font/80 flex-1">&quot;{t.quote}&quot;</p>
+              <footer className="pt-4 border-t" style={{ borderColor: 'var(--color-border)' }}>
+                <p className="font-semibold text-sm text-font">{t.name}</p>
+                <p className="text-xs text-font/50">
+                  {t.role} · {t.company}
+                </p>
+              </footer>
+            </blockquote>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/config.tsx

@@ -0,0 +1,181 @@
+// Portable Puck block config for external sites. Unlike one.ie/web's
+// lib/puck/config.tsx (176 blocks, most delegating to @/components/* imports and
+// several to live D1/resolver reads), this config is SELF-CONTAINED: every block
+// is copied verbatim into ./components with imports rewritten to local paths, so
+// it builds and ships as an npm package with no workspace-internal dependency.
+//
+// Block KEYS match the real registry exactly (LandingHero, PricingSection, …) —
+// C1 shipped 4 generic stub keys (Hero/Features/Pricing/Text) that never matched
+// any real published page, so every real page rendered blank. C3 (2026-07-11)
+// replaced that stub with this verified-portable subset: the 9 blocks confirmed,
+// via a local D1 query, to be what real seeded pages (`beer`, `demo`, `oo-demo-*`)
+// actually use.
+//
+// KNOWN LIMITATION (tracked in text/improvements.md): 176 blocks exist in the real
+// registry; only these 9 ship here. The remaining ~167 either need substrate-live
+// data (excluded by the promise's own "Out of scope" clause — chat/cart/storefront
+// widgets, ProductBlock/RecordBlock/ViewBlock) or simply haven't been ported yet.
+// A published page using an unregistered block type renders that block as nothing
+// (Puck drops unknown types) — same distribution-lag limitation plugin-blog/
+// plugin-docs already carry for their own registries.
+//
+// `fields` below are intentionally minimal (`{}`) — this package only ever calls
+// Puck's read-only <Render>, which never consults `fields` (editor-only metadata).
+// Field/defaultProps shapes are otherwise ported verbatim from the real registry
+// for documentation parity.
+import type { Config } from '@puckeditor/core'
+import { LandingHero } from './components/LandingHero'
+import { HowItWorks } from './components/HowItWorks'
+import { LandingFeatures } from './components/LandingFeatures'
+import { ProofBar } from './components/ProofBar'
+import { SecondaryCTA } from './components/SecondaryCTA'
+import { FAQSection } from './components/FAQSection'
+import { Testimonials } from './components/Testimonials'
+import { PricingSection } from './components/PricingSection'
+import { FooterSection } from './components/FooterSection'
+
+export const pagesPuckConfig: Config = {
+  components: {
+    LandingHero: {
+      fields: {},
+      defaultProps: {
+        bgToken: 'none',
+        headline: 'Build and sell smarter with AI agents',
+        subhead: 'ONE connects your website, your audience, and your AI — so you can launch, grow, and earn without the usual overhead.',
+        primaryCta: { label: 'Get started free', href: '#' },
+        secondaryCta: { label: 'See how it works', href: '#how' },
+      },
+      render: (props: Record<string, unknown>) => (
+        <LandingHero
+          {...(props as any)}
+          primaryCta={(props.primaryCta as any) ?? { label: 'Get started', href: '#' }}
+          secondaryCta={(props.secondaryCta as any)?.label ? (props.secondaryCta as any) : undefined}
+        />
+      ),
+    },
+
+    ProofBar: {
+      fields: {},
+      defaultProps: {
+        bgToken: 'none',
+        stats: [
+          { value: '12,000+', label: 'Businesses powered', source: '' },
+          { value: '99.9%', label: 'Uptime SLA', source: '' },
+          { value: '< 60s', label: 'Time to first agent', source: '' },
+        ],
+      },
+      render: (props: Record<string, unknown>) => <ProofBar {...(props as any)} stats={(props.stats as any) ?? []} />,
+    },
+
+    HowItWorks: {
+      fields: {},
+      defaultProps: {
+        bgToken: 'none',
+        title: 'How it works',
+        steps: [
+          { label: 'Connect your site', description: 'Point ONE at your domain — takes 60 seconds.', detail: 'No code required' },
+          { label: 'Add your agents', description: 'Pick from the library or describe one in plain English.', detail: 'Works with any model' },
+          { label: 'Go live', description: 'Publish your page. Agents handle the rest.', detail: 'Scales automatically' },
+        ],
+      },
+      render: (props: Record<string, unknown>) => <HowItWorks {...(props as any)} steps={(props.steps as any) ?? []} />,
+    },
+
+    LandingFeatures: {
+      fields: {},
+      defaultProps: {
+        bgToken: 'none',
+        title: 'Everything you need',
+        subtitle: 'One platform, every capability.',
+        columns: 3,
+        features: [
+          { headline: 'AI agents built in', body: 'Deploy agents for sales, support, and content — no integrations required.' },
+          { headline: 'Pages that convert', body: 'Drag-and-drop blocks built for every funnel stage.' },
+          { headline: 'Payments included', body: 'Accept crypto and card in minutes, globally.' },
+        ],
+      },
+      render: (props: Record<string, unknown>) => <LandingFeatures {...(props as any)} features={(props.features as any) ?? []} />,
+    },
+
+    Testimonials: {
+      fields: {},
+      defaultProps: {
+        bgToken: 'none',
+        title: 'What our customers say',
+        testimonials: [
+          { quote: 'ONE cut our onboarding time in half. The agents handle everything we used to do manually.', name: 'Sarah O.', role: 'Head of Growth', company: 'Elevate Labs' },
+          { quote: 'We launched our course site in a weekend. The drag-and-drop editor is genuinely impressive.', name: 'Marco D.', role: 'Founder', company: 'Skill Stack' },
+        ],
+      },
+      render: (props: Record<string, unknown>) => <Testimonials {...(props as any)} testimonials={(props.testimonials as any) ?? []} />,
+    },
+
+    PricingSection: {
+      fields: {},
+      defaultProps: {
+        title: 'Simple, transparent pricing',
+        subtitle: 'Start free. Scale as you grow.',
+        tiers: [
+          { name: 'Free', monthlyPrice: '$0', annualPrice: '$0', description: 'Everything you need to get started.', cta: 'Get started', ctaHref: '#' },
+          { name: 'Pro', monthlyPrice: '$49', annualPrice: '$39', description: 'For teams that want more power and scale.', cta: 'Start free trial', ctaHref: '#' },
+        ],
+      },
+      render: (props: Record<string, unknown>) => <PricingSection {...(props as any)} tiers={(props.tiers as any) ?? []} />,
+    },
+
+    FAQSection: {
+      fields: {},
+      defaultProps: {
+        bgToken: 'none',
+        title: 'Frequently asked questions',
+        faqs: [
+          { q: 'Do I need to know how to code?', a: 'No. ONE is designed for non-technical founders and marketers. Everything is drag-and-drop or describe-in-plain-English.' },
+          { q: 'Can I use my own domain?', a: 'Yes. Connect any domain in under a minute from your settings panel.' },
+        ],
+      },
+      render: (props: Record<string, unknown>) => <FAQSection {...(props as any)} faqs={(props.faqs as any) ?? []} />,
+    },
+
+    SecondaryCTA: {
+      fields: {},
+      defaultProps: {
+        bgToken: 'none',
+        headline: 'Ready to start?',
+        primaryCta: { label: 'Get started', href: '#' },
+      },
+      render: (props: Record<string, unknown>) => (
+        <SecondaryCTA
+          {...(props as any)}
+          primaryCta={(props.primaryCta as any) ?? { label: 'Get started', href: '#' }}
+          secondaryCta={(props.secondaryCta as any)?.label ? (props.secondaryCta as any) : undefined}
+        />
+      ),
+    },
+
+    FooterSection: {
+      fields: {},
+      defaultProps: {
+        brand: 'ONE',
+        links: [
+          { label: 'About', href: '#' },
+          { label: 'Features', href: '#' },
+          { label: 'Pricing', href: '#' },
+          { label: 'Contact', href: '#' },
+        ],
+        socials: [
+          { platform: 'twitter', href: '#' },
+          { platform: 'instagram', href: '#' },
+        ],
+        copyright: '© ONE, made for better web.',
+      },
+      render: (props: Record<string, unknown>) => (
+        <FooterSection
+          brand={props.brand as string}
+          links={(props.links as any) ?? []}
+          socials={(props.socials as any) ?? []}
+          copyright={props.copyright as string}
+        />
+      ),
+    },
+  },
+}

package/src/fetchPage.ts

@@ -0,0 +1,58 @@
+// Reads one published page from a ONE workspace via the public `pages:view`
+// receiver, over the existing /api/ask/:receiver dispatch. Draft/unpublished pages
+// are filtered SERVER-SIDE (status='published' in the resolver SQL) — this helper
+// never sees them; it returns null for any not-ok / error / non-result outcome.
+//
+// The /api/ask edge is gateway-guarded (isGatewayRequest): a foreign-origin,
+// keyless request is 403'd unless GATEWAY_SERVICE_SECRET is unset on the target OR
+// a Bearer token is present. `opts.apiKey` sends a Bearer so an external site can
+// reach the receiver when the guard is armed. See text/page-editor-external-plan.md.
+import type { PuckData } from './PageRenderer'
+
+export type { PuckData }
+
+export interface FetchPageOptions {
+  /** Origin of the ONE deploy serving /api/ask. Default: https://one.ie */
+  baseUrl?: string
+  /** Optional workspace world-key sent as `Authorization: Bearer` when the ask edge guard is armed. */
+  apiKey?: string
+  /** Injectable fetch (tests). Default: the global fetch. */
+  fetchImpl?: typeof fetch
+}
+
+interface AskEnvelope {
+  outcome?: string
+  result?: { ok?: boolean; data?: unknown; error?: string }
+}
+
+export async function fetchPage(
+  ws: string,
+  slug: string,
+  opts: FetchPageOptions = {},
+): Promise<PuckData | null> {
+  const baseUrl = (opts.baseUrl ?? 'https://one.ie').replace(/\/$/, '')
+  const doFetch = opts.fetchImpl ?? fetch
+  const headers: Record<string, string> = { 'content-type': 'application/json' }
+  if (opts.apiKey) headers['authorization'] = `Bearer ${opts.apiKey}`
+
+  let res: Response
+  try {
+    res = await doFetch(`${baseUrl}/api/ask/pages:view`, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify({ data: { slug: ws, page: slug } }),
+    })
+  } catch {
+    return null
+  }
+  if (!res.ok) return null
+
+  let env: AskEnvelope
+  try {
+    env = (await res.json()) as AskEnvelope
+  } catch {
+    return null
+  }
+  if (env.outcome !== 'result' || !env.result?.ok) return null
+  return (env.result.data ?? null) as PuckData | null
+}

package/src/index.ts

@@ -0,0 +1,48 @@
+import type { AstroIntegration } from 'astro'
+import type { OnePluginFactory } from '@oneie/frontend'
+
+export interface OnePagesConfig {
+  /** Workspace slug whose published pages this site renders. */
+  ws?: string
+  /** Inject the /p/[slug] route automatically. Default: true. */
+  injectRoutes?: boolean
+}
+
+const defaults: Required<OnePagesConfig> = {
+  ws: '',
+  injectRoutes: true,
+}
+
+export const pages: OnePluginFactory<OnePagesConfig> = (config = {}) => {
+  const resolved: Required<OnePagesConfig> = { ...defaults, ...config }
+
+  const integration = (_cfg: OnePagesConfig): AstroIntegration => ({
+    name: '@oneie/plugin-pages',
+    hooks: {
+      'astro:config:setup': ({ injectRoute }) => {
+        if (resolved.injectRoutes) {
+          injectRoute({
+            pattern: '/p/[slug]',
+            entrypoint: '@oneie/plugin-pages/PageRoute.astro',
+          })
+        }
+      },
+    },
+  })
+
+  return {
+    name: 'plugin-pages',
+    tier: 'free',
+    config: undefined,
+    integration,
+    entitlement: undefined,
+    serves: undefined,
+  }
+}
+
+export { PageRenderer } from './PageRenderer'
+export type { PageRendererProps, PuckData } from './PageRenderer'
+export { fetchPage } from './fetchPage'
+export type { FetchPageOptions } from './fetchPage'
+export { pagesPuckConfig } from './config'
+export type { OnePagesConfig as PagesConfig }

package/src/lib/safe-url.ts

@@ -0,0 +1,20 @@
+// Ported verbatim from one.ie/web/src/lib/safe-url.ts
+//
+// Allowlist a URL's scheme before it is used as an href. Puck page content is
+// workspace-owner-authored but rendered to the public with no login — a
+// javascript:/data:/vbscript: URL stored in an href would execute script in
+// every visitor's browser on every site that installs this package. Returns
+// the URL only when it parses to a safe scheme, otherwise undefined so the
+// caller drops the link.
+const SAFE_SCHEMES = new Set(['http:', 'https:', 'mailto:', 'tel:'])
+
+export function safeHref(url?: string | null): string | undefined {
+  if (!url) return undefined
+  try {
+    const base = typeof window !== 'undefined' ? window.location.origin : 'https://one.ie'
+    const parsed = new URL(url, base)
+    return SAFE_SCHEMES.has(parsed.protocol) ? url : undefined
+  } catch {
+    return undefined
+  }
+}

package/src/lib/ui-signal.ts

@@ -0,0 +1,6 @@
+// Ported verbatim from one.ie/web/src/lib/ui-signal.ts — window-only CustomEvent
+// dispatch, zero substrate coupling, safe on any external site.
+export function emitClick(receiver: string, payload?: unknown): void {
+  if (typeof window === 'undefined') return
+  window.dispatchEvent(new CustomEvent('ui:click', { detail: { receiver, payload } }))
+}

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+// Ported verbatim from one.ie/web/src/lib/utils.ts
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}