@gradial/aci 0.1.20-preview.3 → 0.1.21

package/templates/nextjs/template/src/components/chrome/Footer.tsx

@@ -0,0 +1,86 @@
+import { Container } from '@/components/elements/Container';
+import { Logo } from '@/components/elements/Logo';
+import type { FooterColumn, FooterGroup, FooterLink } from '@gradial/aci/content';
+
+interface FooterProps {
+  brandHref: string;
+  brandLabel: string;
+  brandLogo?: { src: string; alt?: string } | null;
+  columns?: FooterColumn[];
+  social?: FooterLink[];
+  legalLinks?: FooterLink[];
+  copyright?: string;
+}
+
+function columnGroups(column: FooterColumn): FooterGroup[] {
+  if (column.groups?.length) return column.groups;
+  return [{ id: column.id, title: column.title || '', links: column.links || [] }];
+}
+
+export function Footer({ brandHref, brandLabel, brandLogo = null, columns = [], social = [], legalLinks = [], copyright = '' }: FooterProps) {
+  return (
+    <footer className="bm-footer relative pt-[var(--spacing-footer-y)]" id="footer">
+      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand-500)] to-transparent opacity-50" />
+      <Container>
+        <div className="footer-main-grid grid grid-cols-1 gap-12 lg:grid-cols-2">
+          <div className="max-w-sm">
+            <a href={brandHref} className="no-underline">
+              <Logo label={brandLabel} src={brandLogo?.src || ''} alt={brandLogo?.alt || brandLabel} className="w-[var(--width-logo-footer-mobile)] md:w-[var(--width-logo-footer)]" />
+            </a>
+          </div>
+          <div className="grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-4">
+            {columns.map((column) => (
+              <div key={column.id}>
+                {columnGroups(column).map((group) => (
+                  <section key={group.id} aria-label={group.title} className="mb-8">
+                    <h2 className="mb-4 text-[length:var(--text-size-eyebrow)] font-[var(--font-weight-bold)] uppercase tracking-[var(--letter-spacing-label)] text-[var(--color-text-primary)]">
+                      {group.title}
+                    </h2>
+                    <ul className="list-none space-y-3 pl-0">
+                      {group.links.map((link) => (
+                        <li key={link.id}>
+                          <a href={link.href} className="text-[length:var(--text-size-body-small)] text-[var(--color-text-secondary)] no-underline transition-colors hover:text-[var(--color-brand-400)]">
+                            {link.label}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </section>
+                ))}
+              </div>
+            ))}
+            <section aria-label="Social" className="mb-8">
+              <h2 className="mb-4 text-[length:var(--text-size-eyebrow)] font-[var(--font-weight-bold)] uppercase tracking-[var(--letter-spacing-label)] text-[var(--color-text-primary)]">
+                Social
+              </h2>
+              <ul className="list-none space-y-3 pl-0">
+                {social.map((item) => (
+                  <li key={item.id}>
+                    <a href={item.href} className="flex items-center gap-2 text-[length:var(--text-size-body-small)] text-[var(--color-text-secondary)] no-underline transition-colors hover:text-[var(--color-brand-400)]">
+                      <span className="flex h-8 w-8 items-center justify-center rounded-button border border-[var(--color-border-default)] text-[length:var(--text-size-caption)] transition-colors hover:border-[var(--color-brand-500)] hover:text-[var(--color-brand-400)]">
+                        {item.icon || item.label.slice(0, 1)}
+                      </span>
+                      {item.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          </div>
+        </div>
+        <div className="mt-12 flex flex-col gap-4 border-t border-[var(--color-border-default)] pt-8 sm:flex-row sm:items-center sm:justify-between">
+          <ul className="list-none flex flex-wrap gap-4 pl-0">
+            {legalLinks.map((link) => (
+              <li key={link.id}>
+                <a href={link.href} className="text-[length:var(--text-size-caption)] text-[var(--color-text-tertiary)] no-underline transition-colors hover:text-[var(--color-brand-400)]">
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+          <p className="text-[length:var(--text-size-caption)] text-[var(--color-text-tertiary)]">{copyright}</p>
+        </div>
+      </Container>
+    </footer>
+  );
+}

package/templates/nextjs/template/src/components/chrome/Header.tsx

@@ -0,0 +1,74 @@
+import { Button } from '@/components/elements/Button';
+import { Container } from '@/components/elements/Container';
+import { Icon } from '@/components/elements/Icon';
+import { Logo } from '@/components/elements/Logo';
+import type { NavItem, UtilityItem } from '@gradial/aci/content';
+
+interface HeaderProps {
+  brandHref: string;
+  brandLabel: string;
+  brandLogo?: { src: string; alt?: string } | null;
+  navigation?: NavItem[];
+  utilities?: UtilityItem[];
+}
+
+export function Header({ brandHref, brandLabel, brandLogo = null, navigation = [], utilities = [] }: HeaderProps) {
+  return (
+    <header className="bm-header fixed top-0 left-0 right-0 z-[var(--z-header)] border-b border-[var(--header-border)]">
+      <a href="#content-main" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[var(--z-overlay)] focus:rounded-button focus:bg-[var(--color-space-900)] focus:px-4 focus:py-2 focus:text-[var(--color-white)]">
+        Skip to main content
+      </a>
+      <Container className="flex h-[var(--height-header)] items-center justify-between gap-6">
+        <a href={brandHref} className="flex items-center gap-2 no-underline">
+          <Logo label={brandLabel} src={brandLogo?.src || ''} alt={brandLogo?.alt || brandLabel} />
+        </a>
+        <nav className="hidden md:flex items-center gap-8" aria-label="Primary">
+          {navigation.map((item) => (
+            <a
+              key={item.id}
+              href={item.href}
+              className="text-[length:var(--text-size-body-small)] font-[var(--font-weight-medium)] text-[var(--header-muted)] no-underline transition-colors hover:text-[var(--header-link-hover)]"
+            >
+              {item.label}
+            </a>
+          ))}
+        </nav>
+        <div className="hidden md:flex items-center gap-3">
+          {utilities.map((item) => (
+            <Button key={item.id} href={item.href} variant={item.variant || 'outline'}>{item.label}</Button>
+          ))}
+        </div>
+        <div className="md:hidden">
+          <input id="site-mobile-nav" className="peer sr-only" type="checkbox" />
+          <label htmlFor="site-mobile-nav" className="cursor-pointer text-[var(--header-icon)]" aria-label="Open main navigation">
+            <Icon name="menu" />
+          </label>
+          <div className="bm-mobile-nav peer-checked:flex fixed inset-0 z-[var(--z-overlay)] hidden flex-col">
+            <Container className="flex items-center justify-between py-4">
+              <a href={brandHref} className="no-underline">
+                <Logo label={brandLabel} src={brandLogo?.src || ''} alt={brandLogo?.alt || brandLabel} />
+              </a>
+              <label htmlFor="site-mobile-nav" className="cursor-pointer text-[var(--mobile-nav-muted)]" aria-label="Close main navigation">
+                <Icon name="close" />
+              </label>
+            </Container>
+            <nav className="flex flex-col gap-4 px-[var(--spacing-container)] py-6" aria-label="Mobile main navigation">
+              {navigation.map((item) => (
+                <a key={item.id} href={item.href} className="text-[length:var(--mobile-nav-link-size)] leading-[var(--mobile-nav-link-line-height)] font-[var(--font-weight-medium)] text-[var(--mobile-nav-text)] no-underline">
+                  {item.label}
+                </a>
+              ))}
+            </nav>
+            {utilities.length ? (
+              <div className="flex flex-col gap-3 px-[var(--spacing-container)] py-4">
+                {utilities.map((item) => (
+                  <Button key={item.id} href={item.href} variant={item.variant || 'outline'}>{item.label}</Button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </Container>
+    </header>
+  );
+}

package/templates/nextjs/template/src/components/elements/AtomicBlock.tsx

@@ -0,0 +1,13 @@
+import type { KernelAtomicBlock } from '@gradial/aci/content';
+import { ButtonBlock } from './ButtonBlock';
+
+interface AtomicBlockProps {
+  block: KernelAtomicBlock;
+}
+
+export function AtomicBlock({ block }: AtomicBlockProps) {
+  if (block.component === 'button') {
+    return <ButtonBlock {...block.props as Parameters<typeof ButtonBlock>[0]} />;
+  }
+  return null;
+}

package/templates/nextjs/template/src/components/elements/Button.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import type { ButtonVariant } from '@gradial/aci/content';
+
+type ButtonSize = 'default' | 'lg';
+
+interface ButtonProps {
+  href: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  target?: string;
+  rel?: string;
+  children: ReactNode;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: 'bg-[var(--button-primary-bg)] text-[var(--button-primary-text)] border-[var(--button-primary-border)] hover:bg-[var(--button-primary-hover-bg)] hover:border-[var(--button-primary-hover-border)] shadow-[var(--shadow-glow)] hover:shadow-[var(--shadow-glow-lg)]',
+  secondary: 'bg-[var(--button-secondary-bg)] text-[var(--button-secondary-text)] border-[var(--button-secondary-border)] hover:bg-[var(--button-secondary-hover-bg)] hover:border-[var(--button-secondary-hover-border)]',
+  outline: 'bg-[var(--button-outline-bg)] text-[var(--button-outline-text)] border-[var(--button-outline-border)] hover:bg-[var(--button-outline-hover-bg)] hover:border-[var(--button-outline-hover-border)]',
+  tertiary: 'bg-[var(--button-tertiary-bg)] text-[var(--button-tertiary-text)] border-[var(--button-tertiary-border)] hover:bg-[var(--button-tertiary-hover-bg)] hover:text-[var(--button-tertiary-hover-text)]',
+  ghost: 'bg-[var(--button-ghost-bg)] text-[var(--button-ghost-text)] border-[var(--button-ghost-border)] hover:bg-[var(--button-ghost-hover-bg)] hover:text-[var(--button-ghost-hover-text)]',
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  default: 'px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] min-h-[var(--height-button-min)] text-[length:var(--text-button)]',
+  lg: 'px-7 py-3.5 min-h-[3.5rem] text-[length:var(--text-size-body-large)]',
+};
+
+export function Button({ href, variant = 'primary', size = 'default', className = '', target, rel, children }: ButtonProps) {
+  return (
+    <a
+      className={`inline-flex items-center justify-center gap-2 rounded-button leading-button font-[var(--font-weight-semibold)] no-underline transition-all duration-[var(--transition-duration-fast)] ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
+      href={href}
+      target={target}
+      rel={rel}
+    >
+      {children}
+    </a>
+  );
+}

package/templates/nextjs/template/src/components/elements/ButtonBlock.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@/components/elements/Button';
+import { Icon } from '@/components/elements/Icon';
+import type { ContentProps } from '@/cms/contracts/components/button.contract';
+
+export type ButtonBlockProps = ContentProps;
+
+export function ButtonBlock({ label = '', href = '#', variant = 'primary', newWindow = false, icon = '', iconPosition = 'before', className = '' }: ButtonBlockProps) {
+  const target = newWindow ? '_blank' : undefined;
+  const rel = newWindow ? 'noreferrer' : undefined;
+
+  return (
+    <Button href={href} variant={variant} target={target} rel={rel} className={className}>
+      {icon && iconPosition === 'before' ? <Icon name={icon} /> : null}
+      <span>{label}</span>
+      {icon && iconPosition === 'after' ? <Icon name={icon} /> : null}
+    </Button>
+  );
+}

package/templates/nextjs/template/src/components/elements/Container.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+interface ContainerProps {
+  className?: string;
+  children: ReactNode;
+}
+
+export function Container({ className = '', children }: ContainerProps) {
+  return (
+    <div className={`mx-auto max-w-[var(--max-width-container)] px-[var(--spacing-container)] ${className}`}>
+      {children}
+    </div>
+  );
+}

package/templates/nextjs/template/src/components/elements/Icon.tsx

@@ -0,0 +1,29 @@
+interface IconProps {
+  name?: string;
+  className?: string;
+}
+
+const paths: Record<string, string> = {
+  arrow_forward: 'M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z',
+  close: 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+  menu: 'M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z',
+  globe: 'M480-80q-82.5 0-155.5-31.5t-127-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127q54.5-54.5 127-86T480-880q83 0 156 31.5t127 86q54.5 54.5 86 127T880-480q0 82.5-31.5 155.5t-86 127q-54.5 54.5-127 86T480-80Zm0-80q139-36 209.5-131.5T760-480H520v-280q-64 8-117 38.5T320-640h-40q-54 77-87 153.5T160-480q0 131.5 69.5 227T480-160Zm0 80q-83 0-156-31.5t-127-86q-54.5-54.5-86-127T80-480q0-83 31.5-156t86-127q54.5-54.5 127-86T480-880q83 0 156 31.5t127 86q54.5 54.5 86 127T880-480q0 83-31.5 156t-86 127q-54.5 54.5-127 86T480-80Z',
+  speed: 'M400-120 320-760l400 360H440l80 440-120-160Z',
+  setup: 'm480-240 160-96-40-200 160-120-200-80-80-200-80 200-200 80 160 120-40 200 160 96Z',
+};
+
+export function Icon({ name = '', className = '' }: IconProps) {
+  const path = paths[name] || paths.arrow_forward;
+
+  return (
+    <svg
+      className={`inline-block h-6 w-6 text-[color:var(--color-icon-default)] ${className}`}
+      viewBox="0 -960 960 960"
+      aria-hidden="true"
+      focusable="false"
+      fill="currentColor"
+    >
+      <path d={path} />
+    </svg>
+  );
+}

package/templates/nextjs/template/src/components/elements/Logo.tsx

@@ -0,0 +1,38 @@
+import Image from 'next/image';
+
+interface LogoProps {
+  label: string;
+  src?: string;
+  alt?: string;
+  className?: string;
+  width?: number;
+  height?: number;
+}
+
+export function Logo({
+  label,
+  src = '',
+  alt,
+  className = '',
+  width = 200,
+  height = 40,
+}: LogoProps) {
+  if (!src) {
+    return (
+      <span className={`font-[var(--font-weight-bold)] text-[length:var(--text-size-brand)] [font-family:var(--font-family-heading)] ${className}`}>
+        {label}
+      </span>
+    );
+  }
+
+  return (
+    <Image
+      className={`h-auto w-[var(--width-logo)] ${className}`}
+      src={src}
+      alt={alt || label}
+      width={width}
+      height={height}
+      priority
+    />
+  );
+}

package/templates/nextjs/template/src/components/sections/ContainerSection.tsx

@@ -0,0 +1,28 @@
+import { Container } from '@/components/elements/Container';
+import { type ContentProps } from '@/cms/contracts/components/container.contract';
+import type { RenderChildren } from '@gradial/aci/react';
+
+export async function ContainerSection({
+  theme = 'auto',
+  className = '',
+  content,
+  renderChildren,
+}: ContentProps & { renderChildren: RenderChildren<NonNullable<ContentProps['content']>> }) {
+  const buttonCount = content?.filter((b) => b.component === 'button').length ?? 0;
+  const layout = buttonCount === 1
+    ? 'flex-col items-center'
+    : 'flex-col items-center sm:flex-row sm:justify-center sm:gap-4';
+
+  return (
+    <section className={`theme-${theme} relative overflow-hidden py-[var(--spacing-section-y)] ${className}`}>
+      {theme === 'dark' ? (
+        <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-30" />
+      ) : null}
+      <Container className="relative">
+        <div className={`flex ${layout} gap-6 text-center`}>
+          {content ? await renderChildren(content) : null}
+        </div>
+      </Container>
+    </section>
+  );
+}

package/templates/nextjs/template/src/components/sections/FeatureCard.tsx

@@ -0,0 +1,25 @@
+import { Icon } from '@/components/elements/Icon';
+import type { ContentProps } from '@/cms/contracts/components/featureCard.contract';
+
+export type FeatureCardProps = ContentProps;
+
+export function FeatureCard({ icon = '', title = '', description = '' }: FeatureCardProps) {
+  return (
+    <div className="group relative overflow-hidden rounded-card border border-[var(--color-border-default)] bg-[var(--color-white)] p-[var(--spacing-card)] shadow-[var(--shadow-card-default)] transition-all duration-[var(--transition-duration-fast)] hover:-translate-y-1 hover:border-[var(--color-border-strong)] hover:shadow-[var(--shadow-elevated)]">
+      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-[var(--color-brand-500)] to-transparent opacity-0 transition-opacity duration-[var(--transition-duration-fast)] group-hover:opacity-100" />
+      {icon ? (
+        <div className="mb-6 flex h-12 w-12 items-center justify-center rounded-button border border-[var(--color-border-default)] bg-[var(--color-surface-100)] text-[var(--color-brand-600)] shadow-[var(--shadow-glow-sm)] transition-colors group-hover:border-[var(--color-brand-500)] group-hover:text-[var(--color-brand-500)]">
+          <Icon name={icon} className="h-6 w-6" />
+        </div>
+      ) : null}
+      <h3 className="text-[length:var(--text-size-h3)] font-[var(--font-weight-semibold)] text-[var(--color-text-primary)]">
+        {title}
+      </h3>
+      {description ? (
+        <p className="mt-3 text-[length:var(--text-size-body)] leading-relaxed text-[var(--color-text-secondary)]">
+          {description}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/templates/nextjs/template/src/components/sections/FeatureGrid.tsx

@@ -0,0 +1,36 @@
+import { Container } from '@/components/elements/Container';
+import { type ContentProps } from '@/cms/contracts/components/featureGrid.contract';
+import type { RenderChildren } from '@gradial/aci/react';
+
+export async function FeatureGrid({
+  title = '',
+  subtitle = '',
+  features,
+  renderChildren,
+}: ContentProps & { renderChildren: RenderChildren<NonNullable<ContentProps['features']>> }) {
+  const count = features?.length ?? 0;
+  const cols = count <= 2 ? 'sm:grid-cols-2' : 'sm:grid-cols-2 lg:grid-cols-3';
+
+  return (
+    <section className="theme-light relative overflow-hidden py-[var(--spacing-section-y)] bg-[var(--color-white)]">
+      <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-50" />
+      <Container className="relative">
+        <div className="mb-14 max-w-[var(--max-width-container-narrow)]">
+          {title ? (
+            <h2 className="text-[length:var(--text-size-h2-mobile)] font-[var(--font-weight-bold)] leading-tight text-[var(--color-text-primary)] md:text-[length:var(--text-size-h2)]">
+              {title}
+            </h2>
+          ) : null}
+          {subtitle ? (
+            <p className="mt-4 text-[length:var(--text-size-body-large)] leading-relaxed text-[var(--color-text-secondary)]">
+              {subtitle}
+            </p>
+          ) : null}
+        </div>
+        <div className={`grid gap-6 ${cols}`}>
+          {features ? await renderChildren(features) : null}
+        </div>
+      </Container>
+    </section>
+  );
+}

package/templates/nextjs/template/src/components/sections/HomeHero.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@/components/elements/Button';
+import { Container } from '@/components/elements/Container';
+import { primaryImageSource } from '@gradial/aci';
+import type { ContentProps } from '@/cms/contracts/components/homeHero.contract';
+
+type HeroImage = NonNullable<ContentProps['image']>;
+
+export type HomeHeroProps = Omit<ContentProps, 'image'> & { image?: HeroImage };
+
+export function HomeHero({ eyebrow = '', headline = '', description = '', ctaLabel = '', ctaHref = '#', image }: HomeHeroProps) {
+  const imageSrc = heroImageSrc(image);
+  const imageAlt = image?.alt || headline;
+
+  return (
+    <section
+      className="theme-light relative flex min-h-[var(--height-hero-min)] items-center bg-cover bg-center"
+      aria-label={imageAlt}
+      style={{
+        backgroundImage: imageSrc
+          ? `url("${imageSrc}")`
+          : undefined,
+      }}
+    >
+      {/* Soft ambient glow */}
+      <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)]" />
+      {/* Warm radial accent */}
+      <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-radial)]" />
+      {/* Light overlay to keep image airy but legible */}
+      <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-overlay)]" />
+      {/* Bottom fade for extra contrast on text */}
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-[var(--color-white)] via-transparent to-transparent" />
+
+      <Container className="relative z-10 py-[var(--spacing-hero-py)] pt-[var(--height-header)]">
+        <div className="max-w-[var(--width-hero-content)]">
+          {eyebrow ? (
+            <p className="mb-5 text-[length:var(--text-size-eyebrow)] font-[var(--font-weight-bold)] uppercase tracking-[var(--letter-spacing-label)] text-[var(--color-accent-warm)]">
+              {eyebrow}
+            </p>
+          ) : null}
+          <h1 className="text-[length:var(--text-size-h1-mobile)] font-[var(--font-weight-bold)] leading-tight text-[var(--color-text-primary)] md:text-[length:var(--text-size-h1)]">
+            {headline}
+          </h1>
+          {description ? (
+            <p className="mt-6 max-w-2xl text-[length:var(--text-size-body-large)] leading-relaxed text-[var(--color-text-secondary)]">
+              {description}
+            </p>
+          ) : null}
+          {ctaLabel ? (
+            <div className="mt-10">
+              <Button href={ctaHref} variant="primary" size="lg">{ctaLabel}</Button>
+            </div>
+          ) : null}
+        </div>
+      </Container>
+    </section>
+  );
+}
+
+function heroImageSrc(image?: HeroImage) {
+  if (!image || image.sources.length === 0) return '';
+  return primaryImageSource(image).src;
+}

package/templates/nextjs/template/src/components/sections/StatsBar.tsx

@@ -0,0 +1,30 @@
+import { Container } from '@/components/elements/Container';
+import type { ContentProps } from '@/cms/contracts/components/statsBar.contract';
+
+export type StatsBarProps = ContentProps;
+
+export function StatsBar({ stats = [] }: StatsBarProps) {
+  return (
+    <section className="theme-light relative border-y border-[var(--color-border-default)] bg-[var(--color-surface-100)] py-[var(--spacing-section-y)]">
+      <div className="pointer-events-none absolute inset-0 bg-[image:var(--gradient-hero-base)] opacity-40" />
+      <Container className="relative">
+        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
+          {stats.map((stat, index) => (
+            <div key={`${stat.label}-${index}`} className="relative text-center">
+              <p className="text-[length:var(--text-size-h2-mobile)] font-[var(--font-weight-bold)] leading-tight text-[var(--color-text-primary)] md:text-[length:var(--text-size-h2)]">
+                {stat.value}
+                {stat.suffix ? <span className="text-[var(--color-accent-warm)]">{stat.suffix}</span> : null}
+              </p>
+              <p className="mt-3 text-[length:var(--text-size-body-small)] font-[var(--font-weight-medium)] uppercase tracking-[var(--letter-spacing-label)] text-[var(--color-text-secondary)]">
+                {stat.label}
+              </p>
+              {index < stats.length - 1 ? (
+                <div className="hidden lg:block absolute right-0 top-1/2 h-16 w-px -translate-y-1/2 bg-[var(--color-border-default)]" />
+              ) : null}
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}

package/templates/nextjs/template/src/middleware.ts

@@ -0,0 +1,4 @@
+import { createGradialMiddleware } from '@gradial/aci/next/middleware';
+
+export default createGradialMiddleware();
+export { config } from '@gradial/aci/next/middleware';

package/templates/nextjs/template/src/stories/Button.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Button } from '@/components/elements/Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Elements/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    href: '#',
+    variant: 'primary',
+    children: 'Get started',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    href: '#',
+    variant: 'secondary',
+    children: 'Learn more',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    href: '#',
+    variant: 'outline',
+    children: 'Book a demo',
+  },
+};

package/templates/nextjs/template/src/stories/Header.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { Header } from '@/components/chrome/Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Chrome/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {
+    brandHref: '/',
+    brandLabel: 'My Site',
+    navigation: [
+      { id: 'home', label: 'Home', href: '/' },
+      { id: 'about', label: 'About', href: '/about' },
+      { id: 'docs', label: 'Docs', href: '/#docs' },
+    ],
+    utilities: [
+      { id: 'login', label: 'Login', href: '/#login', variant: 'secondary' },
+      { id: 'demo', label: 'Book a demo', href: '/#demo', variant: 'outline' },
+    ],
+  },
+};

package/templates/nextjs/template/src/stories/HomeHero.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { HomeHero } from '@/components/sections/HomeHero';
+
+const meta: Meta<typeof HomeHero> = {
+  title: 'Sections/HomeHero',
+  component: HomeHero,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof HomeHero>;
+
+export const Default: Story = {
+  args: {
+    eyebrow: 'Welcome',
+    headline: 'Ship content updates across every framework.',
+    description: 'One shared compiler-shaped page now drives every local framework preview.',
+    ctaLabel: 'Get started',
+    ctaHref: '#get-started',
+  },
+};
+
+export const NoEyebrow: Story = {
+  args: {
+    headline: 'Build something great',
+    description: 'A simple hero without an eyebrow.',
+    ctaLabel: 'Learn more',
+    ctaHref: '#',
+  },
+};

package/templates/nextjs/template/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "es2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs/template/vercel.json

@@ -0,0 +1,6 @@
+{
+  "framework": "nextjs",
+  "installCommand": "npm install --ignore-scripts",
+  "buildCommand": "npm run build",
+  "outputDirectory": ".next"
+}