create-agntcms-app 0.2.1

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

@@ -0,0 +1,148 @@
+'use client'
+
+import { EditableRichText, EditableImage, EditableLink, read, isSlotInPreview } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { ImageValue, LinkValue } from '@agntcms/next'
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly lead: EditableSlot<'richText', string>
+  readonly image: EditableSlot<'image', ImageValue>
+  readonly primaryCta: EditableSlot<'link', LinkValue>
+  readonly secondaryCta: EditableSlot<'link', LinkValue>
+  readonly layout: EditableSlot<'text', string>
+  readonly background: EditableSlot<'text', string>
+}
+
+const HEADLINE_CLASSES =
+  "[&_h1]:font-display [&_h1]:font-semibold [&_h1]:text-ink [&_h1]:m-0 " +
+  "[&_h1]:!leading-[1.05] [&_h1]:!tracking-[-0.03em] " +
+  "[&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:m-0 " +
+  "[&_h2]:!leading-[1.05] [&_h2]:!tracking-[-0.03em] " +
+  "[&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:m-0 " +
+  "[&_p]:!leading-[1.05] [&_p]:!tracking-[-0.03em] " +
+  "[&_em]:not-italic [&_em]:text-ink-3 [&_em]:font-semibold"
+
+function CtaButton({
+  field,
+  variant,
+  size = 'lg',
+}: {
+  field: EditableSlot<'link', LinkValue>
+  variant: 'primary' | 'secondary'
+  size?: 'md' | 'lg'
+}) {
+  const link = read(field)
+  const href = hrefOf(link)
+  const show = Boolean(href) || isSlotInPreview(field)
+  if (!show) return null
+  const base =
+    'inline-flex items-center gap-2 whitespace-nowrap rounded-sm border transition-colors duration-200 ease-out font-medium no-underline'
+  const sizes = size === 'lg' ? 'text-[15px] px-[22px] py-[13px]' : 'text-sm px-[18px] py-[10px]'
+  const styles =
+    variant === 'primary'
+      ? '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 (
+    <a
+      href={href || '#'}
+      target={isExternalLink(link) ? '_blank' : undefined}
+      rel={isExternalLink(link) ? 'noreferrer' : undefined}
+    >
+      <EditableLink field={field} className={`${base} ${sizes} ${styles}`} />
+    </a>
+  )
+}
+
+export function HeroComponent({
+  eyebrow,
+  headline,
+  lead,
+  image,
+  primaryCta,
+  secondaryCta,
+  layout,
+  background,
+}: Props) {
+  const layoutMode = (read(layout) || 'split').trim()
+  const bg = (read(background) || 'paper').trim()
+  const img = read(image)
+  const hasImage = Boolean(img?.filename) || isSlotInPreview(image)
+  const bgClass = bg === 'paper-2' ? 'bg-paper-2' : 'bg-paper'
+
+  if (layoutMode === 'split') {
+    return (
+      <section className={`${bgClass}`}>
+        <div className="mx-auto w-full max-w-[1280px] px-8 py-[88px]">
+          <div className="grid grid-cols-1 gap-14 lg:grid-cols-[1.05fr_1fr] lg:items-center">
+            <div>
+              <EditableRichText
+                field={eyebrow}
+                className="[&_p]:font-mono [&_p]:font-medium [&_p]:text-[12px] [&_p]:tracking-[0.07em] [&_p]:uppercase [&_p]:text-ink-3 [&_p]:m-0"
+              />
+              <div className={`mt-4 ${HEADLINE_CLASSES} [&_h1]:!text-[clamp(40px,6vw,72px)] [&_h2]:!text-[clamp(40px,6vw,72px)] [&_p]:!text-[clamp(40px,6vw,72px)]`}>
+                <EditableRichText field={headline} />
+              </div>
+              <EditableRichText
+                field={lead}
+                className="mt-5 max-w-[540px] [&_p]:text-[19px] [&_p]:leading-[1.55] [&_p]:text-ink-2 [&_p]:m-0 [&_p+p]:mt-3"
+              />
+              <div className="mt-7 flex flex-wrap items-center gap-3">
+                <CtaButton field={primaryCta} variant="primary" />
+                <CtaButton field={secondaryCta} variant="secondary" />
+              </div>
+            </div>
+            {hasImage ? (
+              <div className="aspect-[5/4] overflow-hidden border border-hairline bg-paper-2">
+                <EditableImage
+                  field={image}
+                  className="!block h-full w-full object-cover [&_img]:h-full [&_img]:w-full [&_img]:object-cover"
+                />
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </section>
+    )
+  }
+
+  // Stacked variants — centered or left-aligned, with optional image below.
+  const isCentered = layoutMode === 'stacked-center'
+  const alignWrapper = isCentered ? 'mx-auto text-center' : ''
+  const alignButtons = isCentered ? 'justify-center' : 'justify-start'
+  const leadAlign = isCentered ? 'mx-auto' : ''
+
+  return (
+    <section className={`${bgClass}`}>
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-[88px]">
+        <div className={`max-w-[880px] ${alignWrapper}`}>
+          <EditableRichText
+            field={eyebrow}
+            className="[&_p]:font-mono [&_p]:font-medium [&_p]:text-[12px] [&_p]:tracking-[0.07em] [&_p]:uppercase [&_p]:text-ink-3 [&_p]:m-0"
+          />
+          <div className={`mt-4 ${HEADLINE_CLASSES} [&_h1]:!text-[clamp(48px,7vw,88px)] [&_h2]:!text-[clamp(48px,7vw,88px)] [&_p]:!text-[clamp(48px,7vw,88px)]`}>
+            <EditableRichText field={headline} />
+          </div>
+          <EditableRichText
+            field={lead}
+            className={`mt-5 max-w-[640px] ${leadAlign} [&_p]:text-[20px] [&_p]:leading-[1.55] [&_p]:text-ink-2 [&_p]:m-0 [&_p+p]:mt-3`}
+          />
+          <div className={`mt-8 flex flex-wrap items-center gap-3 ${alignButtons}`}>
+            <CtaButton field={primaryCta} variant="primary" />
+            <CtaButton field={secondaryCta} variant="secondary" />
+          </div>
+          {hasImage ? (
+            <div className="mt-12 aspect-[16/8] overflow-hidden border border-hairline bg-paper-2">
+              <EditableImage
+                field={image}
+                className="!block h-full w-full object-cover [&_img]:h-full [&_img]:w-full [&_img]:object-cover"
+              />
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,16 @@
+import { RichTextField, TextField, LinkField, ImageField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  // Headline. Use *italic* for muted segments rendered in ink-3.
+  headline: RichTextField,
+  lead: RichTextField,
+  // Optional hero image — when filename is empty the hero renders text only.
+  image: ImageField,
+  primaryCta: LinkField,
+  secondaryCta: LinkField,
+  // "split" | "stacked-center" | "stacked-left". Default "split".
+  layout: TextField,
+  // "paper" | "paper-2". Default "paper".
+  background: TextField,
+}

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

@@ -0,0 +1,57 @@
+'use client'
+
+import { EditableRichText, EditableList } from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Step = SlotItem<typeof schema.steps.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly steps: EditableSlot<'list', ReadonlyArray<Step>>
+}
+
+export function HowItWorksComponent({ eyebrow, headline, steps }: Props) {
+  return (
+    <section id="how" 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]"
+        />
+        <EditableList
+          field={steps}
+          itemSchema={schema.steps.itemSchema}
+          className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-8"
+          renderItem={(step) => (
+            <div className="h-full bg-bg-secondary border-[0.5px] border-border-primary rounded-lg px-[26px] py-6">
+              <EditableRichText
+                field={step.number}
+                as="div"
+                className="font-mono text-[11px] tracking-[0.10em] text-text-brand-primary uppercase"
+              />
+              <EditableRichText
+                field={step.title}
+                className="mt-3.5 mb-2.5
+                  [&_h3]:font-display [&_h3]:font-medium [&_h3]:!text-[20px] [&_h3]:!leading-tight [&_h3]:tracking-[-0.02em] [&_h3]:text-text-primary [&_h3]:m-0
+                  [&_p]:font-display [&_p]:font-medium [&_p]:!text-[20px] [&_p]:!leading-tight [&_p]:tracking-[-0.02em] [&_p]:text-text-primary [&_p]:m-0"
+              />
+              <EditableRichText
+                field={step.description}
+                className="prose [&_p]:text-sm [&_p]:leading-[1.65] [&_p]:text-text-secondary [&_p]:m-0"
+              />
+            </div>
+          )}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,11 @@
+import { RichTextField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  steps: ListField({
+    number: RichTextField,
+    title: RichTextField,
+    description: RichTextField,
+  }),
+}

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

@@ -0,0 +1,110 @@
+'use client'
+
+import { EditableRichText, EditableImage, EditableLink, read, isSlotInPreview } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+import { hrefOf, isExternalLink } from '@agntcms/next'
+import type { ImageValue, LinkValue } from '@agntcms/next'
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly body: EditableSlot<'richText', string>
+  readonly image: EditableSlot<'image', ImageValue>
+  readonly imagePosition: EditableSlot<'text', string>
+  readonly background: EditableSlot<'text', string>
+  readonly primaryCta: EditableSlot<'link', LinkValue>
+  readonly secondaryCta: EditableSlot<'link', LinkValue>
+}
+
+function CtaButton({
+  field,
+  variant,
+}: {
+  field: EditableSlot<'link', LinkValue>
+  variant: 'primary' | 'secondary'
+}) {
+  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-hairline-2 hover:border-ink'
+  return (
+    <a
+      href={href || '#'}
+      target={isExternalLink(link) ? '_blank' : undefined}
+      rel={isExternalLink(link) ? 'noreferrer' : undefined}
+    >
+      <EditableLink
+        field={field}
+        className={`inline-flex items-center gap-2 whitespace-nowrap rounded-sm border px-[18px] py-[10px] text-sm font-medium no-underline transition-colors duration-200 ease-out ${styles}`}
+      />
+    </a>
+  )
+}
+
+export function ImageTextComponent({
+  eyebrow,
+  headline,
+  body,
+  image,
+  imagePosition,
+  background,
+  primaryCta,
+  secondaryCta,
+}: Props) {
+  const position = (read(imagePosition) || 'left').trim()
+  const bg = (read(background) || 'paper').trim()
+  const bgClass = bg === 'paper-2' ? 'bg-paper-2' : 'bg-paper'
+
+  const imageBlock = (
+    <div className="aspect-[4/3] overflow-hidden border border-hairline bg-paper-2">
+      <EditableImage
+        field={image}
+        className="!block h-full w-full object-cover [&_img]:h-full [&_img]:w-full [&_img]:object-cover"
+      />
+    </div>
+  )
+
+  const textBlock = (
+    <div>
+      <EditableRichText
+        field={eyebrow}
+        className="[&_p]:font-mono [&_p]:font-medium [&_p]:text-[12px] [&_p]:tracking-[0.07em] [&_p]:uppercase [&_p]:text-ink-3 [&_p]:m-0"
+      />
+      <div className="mt-3 [&_h2]:m-0 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:text-[40px] [&_h2]:leading-[1.1] [&_h2]:tracking-[-0.025em] [&_p]:m-0 [&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:text-[40px] [&_p]:leading-[1.1] [&_p]:tracking-[-0.025em] [&_em]:not-italic [&_em]:text-ink-3 [&_em]:font-semibold">
+        <EditableRichText field={headline} />
+      </div>
+      <EditableRichText
+        field={body}
+        className="mt-4 [&_p]:m-0 [&_p]:text-[16.5px] [&_p]:leading-[1.65] [&_p]:text-ink-2 [&_p+p]:mt-3"
+      />
+      <div className="mt-6 flex flex-wrap gap-3">
+        <CtaButton field={primaryCta} variant="primary" />
+        <CtaButton field={secondaryCta} variant="secondary" />
+      </div>
+    </div>
+  )
+
+  return (
+    <section className={bgClass}>
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-20">
+        <div className="grid grid-cols-1 gap-16 lg:grid-cols-2 lg:items-center">
+          {position === 'right' ? (
+            <>
+              {textBlock}
+              {imageBlock}
+            </>
+          ) : (
+            <>
+              {imageBlock}
+              {textBlock}
+            </>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,14 @@
+import { RichTextField, TextField, LinkField, ImageField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  body: RichTextField,
+  image: ImageField,
+  // "left" | "right". Default "left".
+  imagePosition: TextField,
+  // "paper" | "paper-2". Default "paper".
+  background: TextField,
+  primaryCta: LinkField,
+  secondaryCta: LinkField,
+}

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

@@ -0,0 +1,37 @@
+'use client'
+
+import { EditableRichText, EditableList, EditableText } from '@agntcms/next/client'
+import type { EditableSlot, SlotItem } from '@agntcms/next/client'
+import { schema } from './schema'
+
+type Logo = SlotItem<typeof schema.logos.itemSchema>
+
+interface Props {
+  readonly lead: EditableSlot<'richText', string>
+  readonly logos: EditableSlot<'list', ReadonlyArray<Logo>>
+}
+
+export function LogoStripComponent({ lead, logos }: Props) {
+  return (
+    <section className="bg-paper">
+      <div className="mx-auto w-full max-w-[1280px] px-8 py-8">
+        <EditableRichText
+          field={lead}
+          className="text-center [&_p]:font-mono [&_p]:font-medium [&_p]:text-[11px] [&_p]:tracking-[0.07em] [&_p]:uppercase [&_p]:text-ink-3 [&_p]:m-0 [&_p]:mb-5"
+        />
+        <EditableList
+          field={logos}
+          itemSchema={schema.logos.itemSchema}
+          className="flex flex-wrap items-center justify-between gap-8"
+          renderItem={(logo) => (
+            <EditableText
+              field={logo.name}
+              as="span"
+              className="font-mono font-medium text-sm tracking-[0.07em] uppercase text-ink-3"
+            />
+          )}
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,6 @@
+import { RichTextField, TextField, ListField } from '@agntcms/next'
+
+export const schema = {
+  lead: RichTextField,
+  logos: ListField({ name: TextField }),
+}

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

@@ -0,0 +1,48 @@
+'use client'
+
+import { EditableRichText, EditableText, read } from '@agntcms/next/client'
+import type { EditableSlot } from '@agntcms/next/client'
+
+interface Props {
+  readonly headline: EditableSlot<'richText', string>
+  readonly emailPlaceholder: EditableSlot<'text', string>
+  readonly buttonLabel: EditableSlot<'text', string>
+  readonly helperText: EditableSlot<'richText', string>
+}
+
+export function NewsletterComponent({
+  headline,
+  emailPlaceholder,
+  buttonLabel,
+  helperText,
+}: Props) {
+  return (
+    <section className="bg-paper-2">
+      <div className="mx-auto w-full max-w-[720px] px-8 py-20 text-center">
+        <div className="[&_h2]:m-0 [&_h2]:font-display [&_h2]:font-semibold [&_h2]:text-ink [&_h2]:text-[36px] [&_h2]:leading-[1.1] [&_h2]:tracking-[-0.025em] [&_p]:m-0 [&_p]:font-display [&_p]:font-semibold [&_p]:text-ink [&_p]:text-[36px] [&_p]:leading-[1.1] [&_p]:tracking-[-0.025em] [&_em]:not-italic [&_em]:text-ink-3 [&_em]:font-semibold">
+          <EditableRichText field={headline} />
+        </div>
+        <form
+          onSubmit={(e) => e.preventDefault()}
+          className="mx-auto mt-7 flex max-w-[480px] items-end gap-0 border-b border-ink-2"
+        >
+          <input
+            type="email"
+            placeholder={read(emailPlaceholder) || 'you@company.com'}
+            className="flex-1 bg-transparent px-0 py-2.5 text-[15px] text-ink outline-none placeholder:text-ink-4"
+          />
+          <button
+            type="submit"
+            className="inline-flex items-center gap-2 whitespace-nowrap rounded-sm border border-ink bg-ink px-[18px] py-2.5 text-sm font-medium text-paper transition-colors duration-200 ease-out hover:bg-ink-2 hover:border-ink-2"
+          >
+            <EditableText field={buttonLabel} as="span" />
+          </button>
+        </form>
+        <EditableRichText
+          field={helperText}
+          className="mt-3.5 [&_p]:font-mono [&_p]:text-[12px] [&_p]:tracking-[0.07em] [&_p]:uppercase [&_p]:text-ink-3 [&_p]:m-0"
+        />
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,8 @@
+import { RichTextField, TextField } from '@agntcms/next'
+
+export const schema = {
+  headline: RichTextField,
+  emailPlaceholder: TextField,
+  buttonLabel: TextField,
+  helperText: RichTextField,
+}

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

@@ -0,0 +1,99 @@
+'use client'
+
+import { EditableLink, EditableRichText, EditableList, read } 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 Stat = SlotItem<typeof schema.stats.itemSchema>
+
+interface Props {
+  readonly eyebrow: EditableSlot<'richText', string>
+  readonly headline: EditableSlot<'richText', string>
+  readonly body: EditableSlot<'richText', string>
+  readonly stats: EditableSlot<'list', ReadonlyArray<Stat>>
+  readonly primaryCta: EditableSlot<'link', LinkValue>
+  readonly secondaryCta: EditableSlot<'link', LinkValue>
+}
+
+export function OpenSourceComponent({ eyebrow, headline, body, stats, primaryCta: rawPrimary, secondaryCta: rawSecondary }: Props) {
+  const primaryCta = read(rawPrimary)
+  const secondaryCta = read(rawSecondary)
+  return (
+    <section id="open-source" 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"
+        />
+
+        <EditableList
+          field={stats}
+          itemSchema={schema.stats.itemSchema}
+          className="grid grid-cols-2 md:grid-cols-4 border-[0.5px] border-border-primary rounded-lg my-8 mb-7 bg-bg-secondary overflow-hidden"
+          renderItem={(stat, index) => (
+            <div
+              className={[
+                'px-6 py-6',
+                'border-r-[0.5px] border-border-primary last:border-r-0',
+                index < 2 ? 'border-b-[0.5px] md:border-b-0' : '',
+              ].join(' ')}
+            >
+              <EditableRichText
+                field={stat.number}
+                as="div"
+                className="font-display font-medium text-[32px] tracking-[-0.04em] text-text-brand-primary"
+              />
+              <EditableRichText
+                field={stat.label}
+                as="div"
+                className="text-xs text-text-secondary mt-1 tracking-[0.04em]"
+              />
+            </div>
+          )}
+        />
+
+        <div className="flex gap-2.5 flex-wrap">
+          {hrefOf(primaryCta) && (
+            <a
+              href={hrefOf(primaryCta)}
+              target={isExternalLink(primaryCta) ? '_blank' : undefined}
+              rel={isExternalLink(primaryCta) ? 'noreferrer' : undefined}
+              className="inline-flex items-center gap-2 bg-transparent text-text-primary border-[0.5px] border-border-primary rounded-sm text-[13px] font-medium px-4 py-2 no-underline hover:bg-bg-secondary transition-colors"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.87-1.36-3.87-1.36-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.34.96.1-.74.4-1.25.72-1.54-2.55-.29-5.24-1.27-5.24-5.66 0-1.25.45-2.27 1.18-3.07-.12-.29-.51-1.46.11-3.04 0 0 .96-.31 3.15 1.17.91-.25 1.89-.38 2.86-.39.97 0 1.95.13 2.86.39 2.18-1.48 3.14-1.17 3.14-1.17.62 1.58.23 2.75.11 3.04.74.8 1.18 1.82 1.18 3.07 0 4.4-2.69 5.36-5.26 5.65.41.36.78 1.06.78 2.13v3.16c0 .31.21.67.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z" />
+              </svg>
+              <EditableLink field={rawPrimary} className="no-underline" />
+              <span aria-hidden="true">↗</span>
+            </a>
+          )}
+          {hrefOf(secondaryCta) && (
+            <a
+              href={hrefOf(secondaryCta)}
+              target={isExternalLink(secondaryCta) ? '_blank' : undefined}
+              rel={isExternalLink(secondaryCta) ? 'noreferrer' : undefined}
+              className="inline-flex items-center gap-2 bg-transparent text-text-primary border-[0.5px] border-border-primary rounded-sm text-[13px] font-medium px-4 py-2 no-underline hover:bg-bg-secondary transition-colors"
+            >
+              <EditableLink field={rawSecondary} className="no-underline" />
+              <span aria-hidden="true">→</span>
+            </a>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}

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

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

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

@@ -0,0 +1,13 @@
+import { RichTextField, LinkField, ListField } from '@agntcms/next'
+
+export const schema = {
+  eyebrow: RichTextField,
+  headline: RichTextField,
+  body: RichTextField,
+  stats: ListField({
+    number: RichTextField,
+    label: RichTextField,
+  }),
+  primaryCta: LinkField,
+  secondaryCta: LinkField,
+}