@gntik-ai/blocks 0.0.0-stage → 0.6.0

package/src/marketing/ComparisonTable/ComparisonTable.tsx

@@ -0,0 +1,245 @@
+import { useId, type ReactNode } from 'react';
+import { Check, Minus } from '@gntik-ai/icons';
+import { Badge, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, cn } from '@gntik-ai/ui';
+import { ActionButton, type MarketingAction } from '../actions';
+import { sampleComparisonPlans, sampleComparisonSections } from './fixtures';
+
+/** A plan or option: one column of the comparison. */
+export interface ComparisonPlan {
+  id: string;
+  name: string;
+  /** Headline price or figure under the name ("$49", "Custom"). */
+  price?: ReactNode;
+  /** Small text after the price ("per month"). */
+  priceNote?: ReactNode;
+  /** Call to action under the price. */
+  cta?: MarketingAction;
+}
+
+/** A plain value, or a value with a short note under it ("Add-on"). */
+export type ComparisonValue =
+  boolean | string | number | null | undefined | { value: boolean | string | number | null; note?: string };
+
+export interface ComparisonFeature {
+  id: string;
+  label: string;
+  /** Muted text under the label. */
+  description?: string;
+  /** Value per plan id. Missing / null values render like `false` (a dash, "Not included"). */
+  values: Readonly<Record<string, ComparisonValue>>;
+}
+
+export interface ComparisonSection {
+  id: string;
+  title: string;
+  features: ComparisonFeature[];
+}
+
+export interface ComparisonTableProps {
+  plans?: ComparisonPlan[];
+  sections?: ComparisonSection[];
+  /** Plan column marked as recommended: badge text, a primary top rule and a tinted column. */
+  highlightedPlanId?: string;
+  /** Text of the recommended badge (default "Recommended"). */
+  highlightLabel?: string;
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Level of the section title (default h2). */
+  headingLevel?: 'h2' | 'h3';
+  /** Table name (screen-reader caption). Default: the title when it is a string, else "Plan comparison". */
+  caption?: string;
+  /** Header of the feature column (screen-reader only unless `showFeatureHeader`). */
+  featureHeader?: string;
+  showFeatureHeader?: boolean;
+  /** Screen-reader text of `true` (default "Included"). */
+  includedLabel?: string;
+  /** Screen-reader text of `false` / missing values (default "Not included"). */
+  notIncludedLabel?: string;
+  /** Formats numeric values (default: en-US grouping). */
+  formatNumber?: (value: number, feature: ComparisonFeature) => string;
+  className?: string;
+}
+
+const number = new Intl.NumberFormat('en-US');
+const STICKY = 'sticky start-0 z-10 bg-card';
+
+/**
+ * Feature comparison of plans or options: columns are plans, rows are features grouped by section.
+ * Booleans render as a check or a dash with screen-reader text; text and numbers render as is. The
+ * table scrolls sideways on narrow screens with the feature column pinned.
+ */
+export function ComparisonTable({
+  plans = sampleComparisonPlans,
+  sections = sampleComparisonSections,
+  highlightedPlanId = 'team',
+  highlightLabel = 'Recommended',
+  eyebrow = 'Compare plans',
+  title = 'Find the plan that fits',
+  description,
+  headingLevel: Heading = 'h2',
+  caption,
+  featureHeader = 'Feature',
+  showFeatureHeader = false,
+  includedLabel = 'Included',
+  notIncludedLabel = 'Not included',
+  formatNumber = (v) => number.format(v),
+  className,
+}: ComparisonTableProps) {
+  const titleId = useId();
+  const hasTitle = title != null && title !== false && title !== '';
+  const tableName = caption ?? (typeof title === 'string' && title ? title : 'Plan comparison');
+  const columns = plans.length + 1;
+  const isHighlighted = (plan: ComparisonPlan) => plan.id === highlightedPlanId;
+  const Wrapper = hasTitle ? 'section' : 'div';
+
+  const renderValue = (raw: ComparisonValue, feature: ComparisonFeature) => {
+    const { value, note } = raw !== null && typeof raw === 'object' ? raw : { value: raw, note: undefined };
+    let content: ReactNode;
+    if (value === true) {
+      content = (
+        <>
+          <Check size={16} aria-hidden className="inline-block text-primary-text" />
+          <span className="sr-only">{includedLabel}</span>
+        </>
+      );
+    } else if (value === false || value == null || value === '') {
+      content = (
+        <>
+          <Minus size={16} aria-hidden className="inline-block text-muted-foreground" />
+          <span className="sr-only">{notIncludedLabel}</span>
+        </>
+      );
+    } else {
+      content = (
+        <span className="text-foreground">{typeof value === 'number' ? formatNumber(value, feature) : value}</span>
+      );
+    }
+    return (
+      <>
+        {content}
+        {note && <span className="mt-0.5 block text-[11.5px] text-muted-foreground">{note}</span>}
+      </>
+    );
+  };
+
+  return (
+    <Wrapper aria-labelledby={hasTitle ? titleId : undefined} className={cn('px-4 py-16 sm:px-6 sm:py-20', className)}>
+      {(hasTitle || eyebrow || description) && (
+        <div className="mx-auto mb-10 max-w-2xl text-center">
+          {eyebrow && (
+            <p className="font-mono text-[12px] font-semibold tracking-wide text-primary-text uppercase">{eyebrow}</p>
+          )}
+          {hasTitle && (
+            <Heading
+              id={titleId}
+              className="mt-2 text-[28px] leading-tight font-semibold tracking-tight text-balance text-foreground sm:text-[34px]"
+            >
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <p className="mt-4 text-[15.5px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+      <div className="mx-auto max-w-6xl overflow-hidden rounded-xl border border-border bg-card shadow-sm">
+        <Table containerLabel={`${tableName}, scrollable`} className="min-w-[40rem] table-fixed">
+          <TableCaption srOnly>{tableName}</TableCaption>
+          <TableHeader>
+            <TableRow className="hover:bg-transparent">
+              <TableHead className={cn(STICKY, 'w-[34%] min-w-44 align-bottom')}>
+                <span className={showFeatureHeader ? undefined : 'sr-only'}>{featureHeader}</span>
+              </TableHead>
+              {plans.map((plan) => {
+                const highlighted = isHighlighted(plan);
+                return (
+                  <TableHead
+                    key={plan.id}
+                    data-highlighted={highlighted || undefined}
+                    className={cn(
+                      'h-auto px-4 pt-5 pb-4 align-top tracking-normal whitespace-normal normal-case',
+                      highlighted ? 'border-t-2 border-t-primary bg-primary/6' : 'bg-card',
+                    )}
+                  >
+                    <span className="flex flex-wrap items-center gap-2">
+                      <span className="text-[15px] font-semibold text-foreground">{plan.name}</span>
+                      {highlighted && (
+                        <Badge tone="primary" shape="pill" size="sm">
+                          {highlightLabel}
+                        </Badge>
+                      )}
+                    </span>
+                    {plan.price != null && (
+                      <span className="mt-2 block">
+                        <span className="text-[22px] font-semibold tracking-tight text-foreground tabular-nums">
+                          {plan.price}
+                        </span>
+                        {plan.priceNote && (
+                          <span className="ms-1.5 text-[12px] font-normal text-muted-foreground">{plan.priceNote}</span>
+                        )}
+                      </span>
+                    )}
+                    {plan.cta && (
+                      <ActionButton
+                        action={plan.cta}
+                        variant={highlighted ? 'primary' : 'secondary'}
+                        size="md"
+                        className="mt-4 w-full"
+                      />
+                    )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          </TableHeader>
+          {sections.map((section) => (
+            <TableBody
+              key={section.id}
+              data-section={section.id}
+              className="[&>tr:last-child>td]:border-b [&>tr:last-child>th]:border-b"
+            >
+              <TableRow className="hover:bg-transparent">
+                <TableHead
+                  scope="rowgroup"
+                  colSpan={columns}
+                  className="h-10 bg-secondary/50 text-[12px] font-semibold text-foreground"
+                >
+                  {/* The text stays in view while the table scrolls sideways. */}
+                  <span className={cn(STICKY, 'bg-transparent')}>{section.title}</span>
+                </TableHead>
+              </TableRow>
+              {section.features.map((feature) => (
+                <TableRow key={feature.id}>
+                  <TableHead
+                    scope="row"
+                    className={cn(
+                      STICKY,
+                      'h-auto py-3 text-[13px] font-medium tracking-normal whitespace-normal text-foreground normal-case',
+                    )}
+                  >
+                    {feature.label}
+                    {feature.description && (
+                      <span className="mt-0.5 block text-[12px] font-normal text-muted-foreground">
+                        {feature.description}
+                      </span>
+                    )}
+                  </TableHead>
+                  {plans.map((plan) => (
+                    <TableCell
+                      key={plan.id}
+                      data-highlighted={isHighlighted(plan) || undefined}
+                      className={cn('text-[13px]', isHighlighted(plan) && 'bg-primary/6')}
+                    >
+                      {renderValue(feature.values[plan.id], feature)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          ))}
+        </Table>
+      </div>
+    </Wrapper>
+  );
+}

package/src/marketing/ComparisonTable/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Comparison table',
+  family: 'marketing',
+  status: 'beta',
+  description:
+    'Plans or options as columns and feature rows grouped by section (one tbody per section with a rowgroup header). Values are booleans (check or dash with screen-reader text), text or numbers; an optional recommended column is marked with a text badge, a primary top rule and a tint. Scrolls sideways on narrow screens with a sticky feature column.',
+  uses: ['Table', 'Badge', 'Button'],
+};

package/src/marketing/ComparisonTable/examples/options.tsx

@@ -0,0 +1,48 @@
+import { ComparisonTable, type ComparisonPlan, type ComparisonSection } from '../ComparisonTable';
+
+const options: ComparisonPlan[] = [
+  { id: 'shared', name: 'Shared runner' },
+  { id: 'dedicated', name: 'Dedicated runner' },
+  { id: 'self-hosted', name: 'Self-hosted' },
+];
+
+const sections: ComparisonSection[] = [
+  {
+    id: 'capacity',
+    title: 'Capacity',
+    features: [
+      { id: 'cpu', label: 'vCPU', values: { shared: 2, dedicated: 8, 'self-hosted': 'Your hardware' } },
+      { id: 'jobs', label: 'Concurrent jobs', values: { shared: 1, dedicated: 10, 'self-hosted': 'Unlimited' } },
+    ],
+  },
+  {
+    id: 'operations',
+    title: 'Operations',
+    features: [
+      { id: 'managed', label: 'Managed updates', values: { shared: true, dedicated: true, 'self-hosted': false } },
+      {
+        id: 'network',
+        label: 'Private networking',
+        values: { shared: false, dedicated: { value: true, note: 'VPC peering' }, 'self-hosted': true },
+      },
+    ],
+  },
+];
+
+/** Options (not priced plans) inside a settings page: no title, no CTAs, a recommended column. */
+export default function RunnerOptionsComparison() {
+  return (
+    <ComparisonTable
+      plans={options}
+      sections={sections}
+      highlightedPlanId="dedicated"
+      highlightLabel="Best for teams"
+      eyebrow={null}
+      title={null}
+      caption="Runner options"
+      showFeatureHeader
+      featureHeader="Capability"
+      className="p-0 sm:p-0"
+    />
+  );
+}

package/src/marketing/ComparisonTable/fixtures.ts

@@ -0,0 +1,83 @@
+import type { ComparisonPlan, ComparisonSection } from './ComparisonTable';
+
+/** Three sample plans (generic, product-agnostic). */
+export const sampleComparisonPlans: ComparisonPlan[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    price: '$0',
+    priceNote: 'per month',
+    cta: { label: 'Start for free', href: '#starter' },
+  },
+  {
+    id: 'team',
+    name: 'Team',
+    price: '$49',
+    priceNote: 'per member / month',
+    cta: { label: 'Start free trial', href: '#team' },
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    price: 'Custom',
+    priceNote: 'billed annually',
+    cta: { label: 'Contact sales', href: '#enterprise' },
+  },
+];
+
+/** Features grouped by section; values are keyed by plan id. */
+export const sampleComparisonSections: ComparisonSection[] = [
+  {
+    id: 'usage',
+    title: 'Usage',
+    features: [
+      { id: 'projects', label: 'Projects', values: { starter: 1, team: 'Unlimited', enterprise: 'Unlimited' } },
+      { id: 'members', label: 'Members', values: { starter: 3, team: 25, enterprise: 'Unlimited' } },
+      {
+        id: 'requests',
+        label: 'Requests per month',
+        values: { starter: 50_000, team: 500_000, enterprise: { value: 'Custom', note: 'Volume pricing' } },
+      },
+      {
+        id: 'retention',
+        label: 'Log retention',
+        description: 'How long request logs are kept.',
+        values: { starter: '7 days', team: '30 days', enterprise: '1 year' },
+      },
+    ],
+  },
+  {
+    id: 'collaboration',
+    title: 'Collaboration',
+    features: [
+      { id: 'previews', label: 'Preview deployments', values: { starter: false, team: true, enterprise: true } },
+      { id: 'roles', label: 'Custom roles', values: { starter: false, team: false, enterprise: true } },
+      { id: 'comments', label: 'Comments and reviews', values: { starter: true, team: true, enterprise: true } },
+    ],
+  },
+  {
+    id: 'security',
+    title: 'Security and compliance',
+    features: [
+      {
+        id: 'sso',
+        label: 'Single sign-on',
+        values: { starter: false, team: { value: true, note: 'Add-on' }, enterprise: true },
+      },
+      { id: 'audit', label: 'Audit log', values: { starter: false, team: false, enterprise: true } },
+      { id: 'residency', label: 'Data residency', values: { starter: false, team: false, enterprise: true } },
+    ],
+  },
+  {
+    id: 'support',
+    title: 'Support',
+    features: [
+      {
+        id: 'channel',
+        label: 'Support channel',
+        values: { starter: 'Community', team: 'Email', enterprise: 'Dedicated' },
+      },
+      { id: 'sla', label: 'Uptime SLA', values: { starter: null, team: '99.9%', enterprise: '99.99%' } },
+    ],
+  },
+];

package/src/marketing/Faq/Faq.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { Faq } from './Faq';
+import { sampleFaqs } from './fixtures';
+
+describe('Faq', () => {
+  it('renders one trigger per question', async () => {
+    const { container } = render(<Faq />);
+    expect(screen.getByRole('region', { name: 'Frequently asked questions' })).toBeInTheDocument();
+    expect(screen.getAllByRole('button')).toHaveLength(sampleFaqs.length);
+    await expectNoAxeViolations(container);
+  });
+
+  it('opens an answer on click', async () => {
+    const user = userEvent.setup();
+    render(<Faq layout="split" />);
+    const trigger = screen.getByRole('button', { name: 'How is usage billed?' });
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByText(/metered per project/)).toBeVisible();
+    await expectNoAxeViolations(document.body);
+  });
+});

package/src/marketing/Faq/Faq.tsx

@@ -0,0 +1,68 @@
+import { useId, type ReactNode } from 'react';
+import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, cn } from '@gntik-ai/ui';
+import { sampleFaqs } from './fixtures';
+
+export interface FaqItem {
+  id: string;
+  question: string;
+  answer: ReactNode;
+}
+
+export interface FaqProps {
+  items?: FaqItem[];
+  title?: ReactNode;
+  description?: ReactNode;
+  /** `stacked` (heading over the list) or `split` (heading left from `lg`). */
+  layout?: 'stacked' | 'split';
+  /** Ids of the items open on mount. */
+  defaultOpen?: string[];
+  /** Allow several items open at once. */
+  multiple?: boolean;
+  headingLevel?: 'h2' | 'h3';
+  className?: string;
+}
+
+/** Frequently asked questions in an accordion, with a heading block. */
+export function Faq({
+  items = sampleFaqs,
+  title = 'Frequently asked questions',
+  description = 'Can’t find what you’re looking for? Reach out to our support team.',
+  layout = 'stacked',
+  defaultOpen,
+  multiple = false,
+  headingLevel: Heading = 'h2',
+  className,
+}: FaqProps) {
+  const titleId = useId();
+  const split = layout === 'split';
+  return (
+    <section
+      aria-labelledby={titleId}
+      className={cn(
+        'px-4 py-16 sm:px-6 sm:py-20',
+        split ? 'mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1fr_2fr]' : 'mx-auto max-w-3xl',
+        className,
+      )}
+    >
+      <div className={cn(!split && 'text-center')}>
+        <Heading
+          id={titleId}
+          className="text-[28px] leading-tight font-semibold tracking-tight text-balance text-foreground sm:text-[34px]"
+        >
+          {title}
+        </Heading>
+        {description && (
+          <p className="mt-4 text-[15px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
+        )}
+      </div>
+      <Accordion variant="flush" multiple={multiple} defaultValue={defaultOpen} className={cn(!split && 'mt-10')}>
+        {items.map((item) => (
+          <AccordionItem key={item.id} value={item.id}>
+            <AccordionTrigger headingLevel={Heading === 'h2' ? 3 : 4}>{item.question}</AccordionTrigger>
+            <AccordionPanel>{item.answer}</AccordionPanel>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </section>
+  );
+}

package/src/marketing/Faq/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'FAQ',
+  family: 'marketing',
+  status: 'beta',
+  description:
+    'Frequently asked questions in an accordion with a heading block, stacked or split layout, single or multiple open items.',
+  uses: ['Accordion', 'AccordionItem', 'AccordionTrigger', 'AccordionPanel'],
+};

package/src/marketing/Faq/fixtures.ts

@@ -0,0 +1,32 @@
+import type { FaqItem } from './Faq';
+
+/** Sample product-agnostic questions. */
+export const sampleFaqs: FaqItem[] = [
+  {
+    id: 'trial',
+    question: 'Is there a free trial?',
+    answer:
+      'Yes. Every paid plan starts with a 14-day trial, no card required. You can cancel at any time during the trial.',
+  },
+  {
+    id: 'billing',
+    question: 'How is usage billed?',
+    answer:
+      'Usage is metered per project and billed monthly. You can set a spending limit and get alerts before you reach it.',
+  },
+  {
+    id: 'plans',
+    question: 'Can I change plans later?',
+    answer: 'Upgrade or downgrade whenever you like. Changes are prorated to the day on your next invoice.',
+  },
+  {
+    id: 'members',
+    question: 'Can I invite people outside my organization?',
+    answer: 'Yes. Guests only get access to the projects you share with them.',
+  },
+  {
+    id: 'data',
+    question: 'Where is my data stored?',
+    answer: 'You choose the region when you create a project. Data stays in that region unless you move it.',
+  },
+];

package/src/marketing/FeatureGrid/FeatureGrid.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen, within } from '@testing-library/react';
+import { expectNoAxeViolations } from '../../test/a11y';
+import { FeatureGrid } from './FeatureGrid';
+import { sampleFeatures } from './fixtures';
+
+describe('FeatureGrid', () => {
+  it('renders a labelled section with one item per feature', async () => {
+    const { container } = render(<FeatureGrid />);
+    const section = screen.getByRole('region', { name: /All the building blocks/ });
+    expect(within(section).getAllByRole('listitem')).toHaveLength(sampleFeatures.length);
+    expect(screen.getByRole('heading', { level: 3, name: 'Instant deployments' })).toBeInTheDocument();
+    await expectNoAxeViolations(container);
+  });
+
+  it('shifts feature headings with the section level', () => {
+    render(<FeatureGrid headingLevel="h3" columns={2} features={sampleFeatures.slice(0, 2)} />);
+    expect(screen.getAllByRole('heading', { level: 4 })).toHaveLength(2);
+  });
+});

package/src/marketing/FeatureGrid/FeatureGrid.tsx

@@ -0,0 +1,79 @@
+import { useId, type ReactNode } from 'react';
+import { cn } from '@gntik-ai/ui';
+import type { LucideIcon } from '@gntik-ai/icons';
+import { sampleFeatures } from './fixtures';
+
+export interface Feature {
+  icon: LucideIcon;
+  title: string;
+  description: ReactNode;
+}
+
+export interface FeatureGridProps {
+  features?: Feature[];
+  eyebrow?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Columns from `lg` (one column on phones, two on tablets). */
+  columns?: 2 | 3 | 4;
+  /** Heading level of the section title; feature titles use the next level. */
+  headingLevel?: 'h2' | 'h3';
+  className?: string;
+}
+
+const COLS = { 2: 'lg:grid-cols-2', 3: 'lg:grid-cols-3', 4: 'lg:grid-cols-4' } as const;
+
+/** Features section: a heading block over a grid of icon + title + description. */
+export function FeatureGrid({
+  features = sampleFeatures,
+  eyebrow = 'Everything included',
+  title = 'All the building blocks, none of the glue code',
+  description = 'The essentials every product needs, designed to work together from day one.',
+  columns = 3,
+  headingLevel: Heading = 'h2',
+  className,
+}: FeatureGridProps) {
+  const titleId = useId();
+  const ItemHeading = Heading === 'h2' ? 'h3' : 'h4';
+  return (
+    <section aria-labelledby={title ? titleId : undefined} className={cn('px-4 py-16 sm:px-6 sm:py-20', className)}>
+      {(eyebrow || title || description) && (
+        <div className="mx-auto max-w-2xl text-center">
+          {eyebrow && (
+            <p className="font-mono text-[12px] font-semibold tracking-wide text-primary-text uppercase">{eyebrow}</p>
+          )}
+          {title && (
+            <Heading
+              id={titleId}
+              className="mt-2 text-[28px] leading-tight font-semibold tracking-tight text-balance text-foreground sm:text-[34px]"
+            >
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <p className="mt-4 text-[15.5px] leading-relaxed text-pretty text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+      <ul className={cn('mx-auto mt-12 grid max-w-6xl gap-x-8 gap-y-10 sm:grid-cols-2', COLS[columns])}>
+        {features.map((f) => {
+          const Glyph = f.icon;
+          return (
+            <li key={f.title} className="flex flex-col">
+              <span
+                aria-hidden
+                className="inline-flex size-10 items-center justify-center rounded-lg bg-primary/14 text-primary-chip-text"
+              >
+                <Glyph size={19} />
+              </span>
+              <ItemHeading className="mt-4 text-[15px] font-semibold tracking-tight text-foreground">
+                {f.title}
+              </ItemHeading>
+              <p className="mt-1.5 text-[13.5px] leading-relaxed text-muted-foreground">{f.description}</p>
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}

package/src/marketing/FeatureGrid/block.meta.ts

@@ -0,0 +1,10 @@
+import type { BlockMeta } from '../../meta';
+
+export const meta: BlockMeta = {
+  name: 'Feature grid',
+  family: 'marketing',
+  status: 'beta',
+  description:
+    'Features section: eyebrow, title and description over a responsive grid of icon tile, title and description.',
+  uses: ['Icon (lucide)'],
+};

package/src/marketing/FeatureGrid/fixtures.ts

@@ -0,0 +1,36 @@
+import { Gauge, Globe, Layers, Lock, Users, Zap } from '@gntik-ai/icons';
+import type { Feature } from './FeatureGrid';
+
+/** Sample product-agnostic features. */
+export const sampleFeatures: Feature[] = [
+  {
+    icon: Zap,
+    title: 'Instant deployments',
+    description: 'Push a change and get a preview URL in seconds. Promote it to production with one click.',
+  },
+  {
+    icon: Users,
+    title: 'Team access',
+    description: 'Invite members, assign roles per project and review every permission change in the audit log.',
+  },
+  {
+    icon: Gauge,
+    title: 'Usage you can read',
+    description: 'Meters for every quota, alerts before the cap and a forecast for the end of the cycle.',
+  },
+  {
+    icon: Lock,
+    title: 'Secure by default',
+    description: 'SSO, scoped API keys and encrypted secrets, with no extra configuration to get right.',
+  },
+  {
+    icon: Globe,
+    title: 'Multi-region',
+    description: 'Run close to your users and keep data in the region you choose.',
+  },
+  {
+    icon: Layers,
+    title: 'Composable',
+    description: 'Start from a template, extend it with your own components and keep one design system.',
+  },
+];