create-agntcms-app 0.2.1

package/dist/template/agntcms/sections/PainAnswer/component.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import { EditableRichText, EditableList } from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Row = SlotItem<typeof schema.rows.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly intro: EditableSlot<'richText', string>
+  readonly painLabel: EditableSlot<'richText', string>
+  readonly oursLabel: EditableSlot<'richText', string>
+  readonly rows: EditableSlot<'list', ReadonlyArray<Row>>
+}
+
+export function PainAnswerComponent({ eyebrow, headline, intro, painLabel, oursLabel, rows }: Props) {
+  return (
+    <section id="vs" className="bg-bg-primary">
+      <div className="mx-auto max-w-[1080px] px-8 py-16 border-t-[0.5px] border-border-secondary">
+        <EditableRichText
+          field={eyebrow}
+          className="prose mb-3.5 [&_p]:text-[11px] [&_p]:font-medium [&_p]:tracking-[0.10em] [&_p]:uppercase [&_p]:text-text-brand-primary [&_p]:m-0"
+        />
+        <EditableRichText
+          field={headline}
+          className="mb-6
+            [&_h2]:font-display [&_h2]:font-medium [&_h2]:text-text-primary [&_h2]:m-0
+            [&_h2]:max-w-[22ch]
+            [&_h2]:!text-[clamp(28px,3.6vw,40px)] [&_h2]:!leading-[1.1] [&_h2]:!tracking-[-0.02em]"
+        />
+        <EditableRichText
+          field={intro}
+          className="prose max-w-[60ch] mb-9 [&_p]:text-text-primary [&_p]:m-0"
+        />
+
+        <div className="border-t-[0.5px] border-border-primary mt-2">
+          {/* Header row */}
+          <div className="hidden sm:grid grid-cols-2 border-b-[0.5px] border-border-primary">
+            <EditableRichText
+              field={painLabel}
+              className="prose px-6 py-3.5 [&_p]:text-[11px] [&_p]:font-medium [&_p]:tracking-[0.10em] [&_p]:uppercase [&_p]:text-text-secondary [&_p]:m-0"
+            />
+            <EditableRichText
+              field={oursLabel}
+              className="prose px-6 py-3.5 border-l-[0.5px] border-border-primary [&_p]:text-[11px] [&_p]:font-medium [&_p]:tracking-[0.10em] [&_p]:uppercase [&_p]:text-text-brand-primary [&_p]:m-0"
+            />
+          </div>
+
+          <EditableList
+            field={rows}
+            itemSchema={schema.rows.itemSchema}
+            className="contents"
+            renderItem={(row, index) => {
+              const num = String(index + 1).padStart(2, '0')
+              return (
+                <div className="grid grid-cols-1 sm:grid-cols-2 border-b-[0.5px] border-border-primary">
+                  <div className="flex gap-[18px] px-6 py-6 items-start text-text-tertiary">
+                    <div className="font-mono text-[11px] tracking-[0.06em] text-text-tertiary mt-[3px] shrink-0 w-[18px]">{num}</div>
+                    <EditableRichText
+                      field={row.pain}
+                      className="prose [&_p]:m-0 [&_p]:text-[15px] [&_p]:leading-[1.55] [&_p]:line-through [&_p]:decoration-text-tertiary [&_p]:decoration-[0.5px]"
+                    />
+                  </div>
+                  <div className="flex gap-[18px] px-6 py-6 items-start bg-bg-secondary border-t-[0.5px] sm:border-t-0 sm:border-l-[0.5px] border-border-primary">
+                    <div className="font-mono text-[11px] tracking-[0.06em] text-text-brand-primary mt-[3px] shrink-0 w-[18px]">→</div>
+                    <EditableRichText
+                      field={row.ours}
+                      className="prose [&_p]:m-0 [&_p]:text-[15px] [&_p]:leading-[1.55] [&_p]:text-text-primary"
+                    />
+                  </div>
+                </div>
+              )
+            }}
+          />
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/PainAnswer/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { PainAnswerComponent } from './component'
+
+export const PainAnswer = defineSection({
+  name: 'PainAnswer',
+  category: 'Content',
+  schema,
+  component: PainAnswerComponent,
+})

package/dist/template/agntcms/sections/PainAnswer/schema.ts

@@ -0,0 +1,15 @@
+import { RichTextField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  intro: RichTextField,
+  // Header labels for the two columns.
+  painLabel: RichTextField,
+  oursLabel: RichTextField,
+  // Each row pairs a "pain" statement with an "ours" answer.
+  rows: ListField({
+    pain: RichTextField,
+    ours: RichTextField,
+  }),
+}

package/dist/template/agntcms/sections/PricingPlans/component.tsx

@@ -0,0 +1,100 @@
+'use client'
+
+import {
+  EditableRichText,
+  EditableText,
+  EditableLink,
+  EditableList,
+  read,
+  isSlotInPreview,
+} from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import { schema } from './schema'
+
+type Plan = SlotItem<typeof schema.plans.itemSchema>
+
+interface Props {
+  readonly plans: EditableSlot<'list', ReadonlyArray<Plan>>
+}
+
+export function PricingPlansComponent({ plans }: Props) {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-24">
+        <EditableList
+          field={plans}
+          itemSchema={schema.plans.itemSchema}
+          className="grid grid-cols-1 gap-5 lg:grid-cols-3"
+          renderItem={(plan) => {
+            const featured = read(plan.featured)
+            const cta = read(plan.cta)
+            const ctaHref = hrefOf(cta)
+            const showCta = Boolean(ctaHref) || isSlotInPreview(plan.cta)
+            const borderClass = featured ? 'border-ink' : 'border-hairline'
+            const ctaStyles = featured
+              ? 'bg-ink text-paper border-ink hover:bg-ink-2 hover:border-ink-2'
+              : 'bg-transparent text-ink border-hairline-2 hover:border-ink'
+            return (
+              <div className={`relative border bg-transparent p-8 ${borderClass}`}>
+                {featured ? (
+                  <span className="absolute -top-px -left-px bg-ink px-2.5 py-[5px] font-mono text-[10px] font-medium tracking-[0.07em] uppercase text-paper">
+                    most popular
+                  </span>
+                ) : null}
+                <EditableText
+                  field={plan.name}
+                  as="h3"
+                  className={`m-0 font-mono text-[16px] font-medium tracking-[0.04em] uppercase text-ink-3 ${featured ? 'mt-5' : ''}`}
+                />
+                <div className="mt-3.5 flex items-baseline gap-2">
+                  <EditableText
+                    field={plan.price}
+                    as="span"
+                    className="font-display text-[56px] font-semibold leading-none tracking-[-0.03em] text-ink"
+                  />
+                  <EditableText
+                    field={plan.priceSub}
+                    as="span"
+                    className="font-mono text-[13px] text-ink-3"
+                  />
+                </div>
+                <EditableRichText
+                  field={plan.pitch}
+                  className="mt-2.5 [&_p]:m-0 [&_p]:text-[14.5px] [&_p]:leading-[1.55] [&_p]:text-ink-3"
+                />
+                {showCta && (
+                  <a
+                    href={ctaHref || '#'}
+                    target={isExternalLink(cta) ? '_blank' : undefined}
+                    rel={isExternalLink(cta) ? 'noreferrer' : undefined}
+                    className="mt-6 block"
+                  >
+                    <EditableLink
+                      field={plan.cta}
+                      className={`inline-flex w-full items-center justify-center gap-2 whitespace-nowrap rounded-sm border px-[22px] py-[13px] text-[15px] font-medium no-underline transition-colors duration-200 ease-out ${ctaStyles}`}
+                    />
+                  </a>
+                )}
+                <EditableList
+                  field={plan.features}
+                  itemSchema={schema.plans.itemSchema.features.itemSchema}
+                  className="mt-7 flex list-none flex-col gap-2.5 border-t border-hairline p-0 pt-6"
+                  renderItem={(f) => (
+                    <div className="flex items-start gap-3 text-[14.5px] leading-[1.55] text-ink-2">
+                      <span className="flex-shrink-0 font-mono text-ink-3">→</span>
+                      <EditableRichText
+                        field={f.item}
+                        className="[&_p]:m-0 [&_p]:text-[14.5px] [&_p]:leading-[1.55] [&_p]:text-ink-2"
+                      />
+                    </div>
+                  )}
+                />
+              </div>
+            )
+          }}
+        />
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/PricingPlans/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { PricingPlansComponent } from './component'
+
+export const PricingPlans = defineSection({
+  name: 'PricingPlans',
+  category: 'Pricing',
+  schema,
+  component: PricingPlansComponent,
+})

package/dist/template/agntcms/sections/PricingPlans/schema.ts

@@ -0,0 +1,13 @@
+import { RichTextField, TextField, LinkField, BooleanField, ListField } from '@agntcms/next'
+
+export const schema = {
+  plans: ListField({
+    name: TextField,
+    price: TextField,
+    priceSub: TextField,
+    featured: BooleanField,
+    pitch: RichTextField,
+    features: ListField({ item: RichTextField }),
+    cta: LinkField,
+  }),
+}

package/dist/template/agntcms/sections/Problem/component.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { EditableRichText } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly body: EditableSlot<'richText', string>
+  readonly messageEyebrow: EditableSlot<'richText', string>
+  readonly message: EditableSlot<'richText', string>
+}
+
+export function ProblemComponent({ eyebrow, headline, body, messageEyebrow, message }: Props) {
+  return (
+    <section id="problem" className="bg-bg-primary">
+      <div className="mx-auto max-w-[1080px] px-8 py-16 border-t-[0.5px] border-border-secondary">
+        <EditableRichText
+          field={eyebrow}
+          className="prose mb-3.5 [&_p]:text-[11px] [&_p]:font-medium [&_p]:tracking-[0.10em] [&_p]:uppercase [&_p]:text-text-brand-primary [&_p]:m-0"
+        />
+        <EditableRichText
+          field={headline}
+          className="mb-6
+            [&_h2]:font-display [&_h2]:font-medium [&_h2]:text-text-primary [&_h2]:m-0
+            [&_h2]:max-w-[22ch]
+            [&_h2]:!text-[clamp(28px,3.6vw,40px)] [&_h2]:!leading-[1.1] [&_h2]:!tracking-[-0.02em]"
+        />
+        <EditableRichText
+          field={body}
+          className="prose max-w-[60ch]
+            [&_p]:text-text-primary [&_p]:m-0 [&_p]:mb-4 [&_p:last-child]:mb-0"
+        />
+        <div className="bg-bg-secondary border-[0.5px] border-border-primary border-l-2 border-l-border-brand rounded-r-lg py-[18px] px-[22px] my-6 max-w-[60ch]">
+          <EditableRichText
+            field={messageEyebrow}
+            className="prose mb-2 [&_p]:text-[11px] [&_p]:font-medium [&_p]:tracking-[0.10em] [&_p]:uppercase [&_p]:text-text-brand-primary [&_p]:m-0"
+          />
+          <EditableRichText
+            field={message}
+            className="prose
+              [&_p]:font-display [&_p]:font-medium [&_p]:text-[22px] [&_p]:leading-[1.35]
+              [&_p]:tracking-[-0.02em] [&_p]:text-text-primary [&_p]:m-0"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}

package/dist/template/agntcms/sections/Problem/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { ProblemComponent } from './component'
+
+export const Problem = defineSection({
+  name: 'Problem',
+  category: 'Content',
+  schema,
+  component: ProblemComponent,
+})

package/dist/template/agntcms/sections/Problem/schema.ts

@@ -0,0 +1,12 @@
+import { RichTextField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  // Long-form prose rendered as a stack of paragraphs (markdown).
+  body: RichTextField,
+  // Eyebrow inside the highlight message block.
+  messageEyebrow: RichTextField,
+  // Highlight statement inside the teal-bordered message block.
+  message: RichTextField,
+}

package/dist/template/agntcms/sections/SiteFooter/component.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { EditableText, EditableRichText, EditableList, read } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Column = SlotItem<typeof schema.columns.itemSchema>
+
+interface Props {
+  readonly brandName: EditableSlot<'text', string>
+  readonly showCaret: EditableSlot<'boolean', boolean>
+  readonly tagline: EditableSlot<'richText', string>
+  readonly columns: EditableSlot<'list', ReadonlyArray<Column>>
+  readonly copyright: EditableSlot<'text', string>
+  readonly versionLine: EditableSlot<'text', string>
+}
+
+export function SiteFooterComponent({
+  brandName,
+  showCaret,
+  tagline,
+  columns,
+  copyright,
+  versionLine,
+}: Props) {
+  const caret = read(showCaret)
+  return (
+    <footer className="bg-paper">
+      <div className="mx-auto w-full max-w-[1280px] px-8 pt-20 pb-10">
+        <div className="grid grid-cols-1 gap-12 md:grid-cols-5">
+          <div className="md:col-span-2">
+            <span className="inline-flex items-center font-mono text-[18px] font-semibold tracking-[-0.01em] text-ink">
+              <EditableText field={brandName} as="span" />
+              {caret ? (
+                <span
+                  aria-hidden="true"
+                  className="ml-1 inline-block h-[14px] w-[7px] bg-teal animate-caret-blink"
+                />
+              ) : null}
+            </span>
+            <EditableRichText
+              field={tagline}
+              className="mt-3.5 max-w-[280px] [&_p]:m-0 [&_p]:text-sm [&_p]:leading-[1.6] [&_p]:text-ink-3"
+            />
+          </div>
+          <EditableList
+            field={columns}
+            itemSchema={schema.columns.itemSchema}
+            className="contents"
+            renderItem={(col) => (
+              <div>
+                <EditableText
+                  field={col.heading}
+                  as="div"
+                  className="mb-3 font-mono text-[11px] font-medium tracking-[0.07em] uppercase text-ink-3"
+                />
+                <EditableList
+                  field={col.links}
+                  itemSchema={schema.columns.itemSchema.links.itemSchema}
+                  className="flex flex-col gap-2"
+                  renderItem={(item) => {
+                    const link = read(item.link)
+                    const href = hrefOf(link) || '#'
+                    return (
+                      <a
+                        href={href}
+                        target={isExternalLink(link) ? '_blank' : undefined}
+                        rel={isExternalLink(link) ? 'noreferrer' : undefined}
+                        className="text-sm text-ink-2 no-underline hover:text-ink"
+                      >
+                        <EditableText field={item.label} as="span" />
+                      </a>
+                    )
+                  }}
+                />
+              </div>
+            )}
+          />
+        </div>
+        <div className="mt-16 flex flex-col gap-2 border-t border-hairline pt-6 font-mono text-xs text-ink-3 md:flex-row md:justify-between md:items-center">
+          <EditableText field={copyright} as="span" />
+          <EditableText field={versionLine} as="span" />
+        </div>
+      </div>
+    </footer>
+  )
+}

package/dist/template/agntcms/sections/SiteFooter/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { SiteFooterComponent } from './component'
+
+export const SiteFooter = defineSection({
+  name: 'SiteFooter',
+  category: 'Layout',
+  schema,
+  component: SiteFooterComponent,
+})

package/dist/template/agntcms/sections/SiteFooter/schema.ts

@@ -0,0 +1,13 @@
+import { TextField, RichTextField, LinkField, BooleanField, ListField } from '@agntcms/next'
+
+export const schema = {
+  brandName: TextField,
+  showCaret: BooleanField,
+  tagline: RichTextField,
+  columns: ListField({
+    heading: TextField,
+    links: ListField({ label: TextField, link: LinkField }),
+  }),
+  copyright: TextField,
+  versionLine: TextField,
+}

package/dist/template/agntcms/sections/SiteHeader/component.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import { EditableText, EditableLink, EditableList, read, isSlotInPreview } from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { LinkValue } from '@agntcms/next'
+import { schema } from './schema'
+
+type NavItem = SlotItem<typeof schema.navItems.itemSchema>
+
+interface Props {
+  readonly brandName: EditableSlot<'text', string>
+  readonly showCaret: EditableSlot<'boolean', boolean>
+  readonly navItems: EditableSlot<'list', ReadonlyArray<NavItem>>
+  readonly signInCta: EditableSlot<'link', LinkValue>
+  readonly primaryCta: EditableSlot<'link', LinkValue>
+}
+
+function HeaderCta({
+  field,
+  variant,
+}: {
+  field: EditableSlot<'link', LinkValue>
+  variant: 'ghost' | 'primary'
+}) {
+  const link = read(field)
+  const href = hrefOf(link)
+  const show = Boolean(href) || isSlotInPreview(field)
+  if (!show) return null
+  const styles =
+    variant === 'primary'
+      ? 'bg-ink text-paper border-ink hover:bg-ink-2 hover:border-ink-2'
+      : 'bg-transparent text-ink border-transparent hover:text-ink-3'
+  return (
+    <a
+      href={href || '#'}
+      target={isExternalLink(link) ? '_blank' : undefined}
+      rel={isExternalLink(link) ? 'noreferrer' : undefined}
+    >
+      <EditableLink
+        field={field}
+        className={`inline-flex items-center gap-1.5 whitespace-nowrap rounded-sm border px-3 py-[7px] text-[13px] font-medium no-underline transition-colors duration-200 ease-out ${styles}`}
+      />
+    </a>
+  )
+}
+
+export function SiteHeaderComponent({
+  brandName,
+  showCaret,
+  navItems,
+  signInCta,
+  primaryCta,
+}: Props) {
+  const caret = read(showCaret)
+  return (
+    <header className="sticky top-0 z-50 bg-paper">
+      <div className="mx-auto w-full max-w-[1280px] px-8">
+        <div className="flex items-center gap-7 py-[18px]">
+          <a
+            href="/"
+            aria-label="Home"
+            className="inline-flex items-center font-mono text-[18px] font-semibold tracking-[-0.01em] text-ink no-underline"
+          >
+            <EditableText field={brandName} as="span" />
+            {caret ? (
+              <span
+                aria-hidden="true"
+                className="ml-1 inline-block h-[14px] w-[7px] bg-teal animate-caret-blink"
+              />
+            ) : null}
+          </a>
+          <EditableList
+            field={navItems}
+            itemSchema={schema.navItems.itemSchema}
+            className="hidden md:flex items-center gap-[22px] ml-3"
+            renderItem={(item) => {
+              const link = read(item.link)
+              const href = hrefOf(link)
+              return (
+                <a
+                  href={href || '#'}
+                  target={isExternalLink(link) ? '_blank' : undefined}
+                  rel={isExternalLink(link) ? 'noreferrer' : undefined}
+                  className="border-b border-transparent pb-0.5 text-sm font-medium text-ink-3 no-underline hover:text-ink"
+                >
+                  <EditableText field={item.label} as="span" />
+                </a>
+              )
+            }}
+          />
+          <div className="flex-1" />
+          <HeaderCta field={signInCta} variant="ghost" />
+          <HeaderCta field={primaryCta} variant="primary" />
+        </div>
+      </div>
+    </header>
+  )
+}

package/dist/template/agntcms/sections/SiteHeader/index.ts

@@ -0,0 +1,10 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { SiteHeaderComponent } from './component'
+
+export const SiteHeader = defineSection({
+  name: 'SiteHeader',
+  category: 'Layout',
+  schema,
+  component: SiteHeaderComponent,
+})

package/dist/template/agntcms/sections/SiteHeader/schema.ts

@@ -0,0 +1,14 @@
+import { TextField, LinkField, BooleanField, ListField } from '@agntcms/next'
+
+export const schema = {
+  // Wordmark text (lowercase mono).
+  brandName: TextField,
+  // When true, render the teal blinking caret after the wordmark.
+  showCaret: BooleanField,
+  // Primary navigation.
+  navItems: ListField({ label: TextField, link: LinkField }),
+  // "Sign in"-style secondary header CTA.
+  signInCta: LinkField,
+  // "Start building"-style primary header CTA.
+  primaryCta: LinkField,
+}

package/dist/template/agntcms/sections/SiteMeta/component.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+// SiteMeta is a data-only global: it holds SEO defaults (siteName,
+// baseUrl, defaultOgImage, defaultDescription). It is consumed at the
+// server layer by generateMetadata in app/[[...slug]]/page.tsx and by
+// app/layout.tsx; it is never rendered as a visible section.
+//
+// The component is intentionally a no-op. GlobalSlot renders it when
+// reading via runtime.getGlobal, but no visible output is wanted — the
+// section exists purely to make the data editable through the admin UI.
+
+import type { EditableSlot } from '@agntcms/next/client'
+import type { ImageValue } from '@agntcms/next'
+
+interface Props {
+  readonly siteName: EditableSlot<'text', string>
+  readonly baseUrl: EditableSlot<'text', string>
+  readonly defaultOgImage: EditableSlot<'image', ImageValue>
+  readonly defaultDescription: EditableSlot<'text', string>
+}
+
+export function SiteMetaComponent(_props: Props) {
+  // Intentional no-op — this global is consumed by server metadata
+  // helpers only. Rendering it in the page body would be incorrect.
+  return null
+}

package/dist/template/agntcms/sections/SiteMeta/index.ts

@@ -0,0 +1,13 @@
+import { defineSection } from '@agntcms/next'
+import { schema } from './schema'
+import { SiteMetaComponent } from './component'
+
+export const SiteMeta = defineSection({
+  name: 'SiteMeta',
+  // 'Global' category groups this section with SiteHeader/SiteFooter in the
+  // picker so authors understand it is a layout/infrastructure section rather
+  // than a page content block.
+  category: 'Global',
+  schema,
+  component: SiteMetaComponent,
+})

package/dist/template/agntcms/sections/SiteMeta/schema.ts

@@ -0,0 +1,18 @@
+import { TextField, ImageField } from '@agntcms/next'
+
+export const schema = {
+  // Site name used in the page title template: "<page title> | <siteName>"
+  siteName: TextField,
+  // Canonical base URL, e.g. "https://agntcms.dev". Used by sitemap.ts
+  // and generateMetadata to construct canonical URLs. Include protocol,
+  // no trailing slash.
+  baseUrl: TextField,
+  // Fallback OG image shown when a page has no seo.ogImage and no
+  // coverImage. Optional — pages that always set their own OG image
+  // do not need this.
+  defaultOgImage: ImageField,
+  // Global fallback description. Shown on the home page (before any
+  // page-level seo.description is available) and used as openGraph
+  // description in layout.tsx.
+  defaultDescription: TextField,
+}